npm - @cghbcf/xp-ui - Versions diffs - 1.0.1 → 1.2.0 - Mend

@cghbcf/xp-ui 1.0.1 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/README.md +259 -2
package/dist/cghbcf-xp-ui.cjs.js +5 -4
package/dist/cghbcf-xp-ui.es.js +1407 -616
package/dist/style.css +1 -1
package/package.json +1 -1

package/dist/cghbcf-xp-ui.es.js CHANGED Viewed

@@ -1,13 +1,13 @@
-import { ref as _, openBlock as r, createBlock as z, Transition as N, withCtx as S, createElementBlock as i, normalizeClass as $, createElementVNode as c, toDisplayString as k, renderSlot as b, createTextVNode as X, createCommentVNode as g, computed as w, normalizeStyle as C, Teleport as L, createVNode as B, withModifiers as K, onMounted as Q, onBeforeUnmount as J, Fragment as W, renderList as q, nextTick as Z, inject as oe, provide as se } from "vue";
-const v = (e, t) => {
-  const a = e.__vccOpts || e;
-  for (const [l, n] of t)
-    a[l] = n;
-  return a;
-}, re = { class: "xp-alert__icon" }, ie = { class: "xp-alert__content" }, de = { class: "xp-alert__title" }, ce = {
+import { ref as S, openBlock as i, createBlock as R, Transition as A, withCtx as j, createElementBlock as a, normalizeClass as B, createElementVNode as n, toDisplayString as b, renderSlot as y, createTextVNode as H, createCommentVNode as x, computed as z, normalizeStyle as T, onUnmounted as re, Teleport as J, createVNode as E, withModifiers as D, Fragment as k, renderList as V, watch as ae, onMounted as de, onBeforeUnmount as Q, nextTick as ue, inject as ke, provide as be, reactive as we, unref as ce, TransitionGroup as $e } from "vue";
+const C = (e, o) => {
+  const t = e.__vccOpts || e;
+  for (const [s, l] of o)
+    t[s] = l;
+  return t;
+}, Ce = { class: "xp-alert__icon" }, Me = { class: "xp-alert__content" }, Se = { class: "xp-alert__title" }, Be = {
   key: 0,
   class: "xp-alert__description"
-}, ue = {
+}, ze = {
   __name: "Alert",
   props: {
     title: {
@@ -34,54 +34,54 @@ const v = (e, t) => {
     }
   },
   emits: ["close"],
-  setup(e, { emit: t }) {
-    const a = t, l = _(!0), n = {
+  setup(e, { emit: o }) {
+    const t = o, s = S(!0), l = {
       success: "✓",
       warning: "!",
       danger: "×",
       info: "i"
-    }, s = () => {
-      l.value = !1, a("close");
+    }, u = () => {
+      s.value = !1, t("close");
     };
-    return (o, u) => (r(), z(N, { name: "xp-alert-fade" }, {
-      default: S(() => [
-        l.value ? (r(), i("div", {
+    return (d, v) => (i(), R(A, { name: "xp-alert-fade" }, {
+      default: j(() => [
+        s.value ? (i(), a("div", {
           key: 0,
-          class: $(["xp-alert", [
+          class: B(["xp-alert", [
             `xp-alert--${e.type}`,
             `xp-alert--${e.effect}`,
             { "xp-alert--plain": e.effect === "plain" }
           ]]),
           role: "alert"
         }, [
-          c("span", re, k(n[e.type]), 1),
-          c("div", ie, [
-            c("span", de, [
-              b(o.$slots, "default", {}, () => [
-                X(k(e.title), 1)
+          n("span", Ce, b(l[e.type]), 1),
+          n("div", Me, [
+            n("span", Se, [
+              y(d.$slots, "default", {}, () => [
+                H(b(e.title), 1)
               ], !0)
             ]),
-            o.$slots.default ? (r(), i("p", ce, [
-              b(o.$slots, "default", {}, void 0, !0)
-            ])) : g("", !0)
+            d.$slots.default ? (i(), a("p", Be, [
+              y(d.$slots, "default", {}, void 0, !0)
+            ])) : x("", !0)
           ]),
-          e.closable ? (r(), i("i", {
+          e.closable ? (i(), a("i", {
             key: 0,
             class: "xp-alert__close-btn",
-            onClick: s
-          }, "×")) : g("", !0)
-        ], 2)) : g("", !0)
+            onClick: u
+          }, "×")) : x("", !0)
+        ], 2)) : x("", !0)
       ]),
       _: 3
     }));
   }
-}, pe = /* @__PURE__ */ v(ue, [["__scopeId", "data-v-91d792bd"]]), fe = ["src", "alt"], he = {
+}, Ie = /* @__PURE__ */ C(ze, [["__scopeId", "data-v-91d792bd"]]), Te = ["src", "alt"], Ve = {
   key: 1,
   class: "xp-avatar__slot"
-}, me = {
+}, je = {
   key: 2,
   class: "xp-avatar__text"
-}, ge = {
+}, Ee = {
   __name: "Avatar",
   props: {
     src: {
@@ -108,32 +108,32 @@ const v = (e, t) => {
     }
   },
   emits: ["error"],
-  setup(e, { emit: t }) {
-    const a = e, l = t, n = _(!1), s = w(() => ({
-      backgroundColor: a.src ? "transparent" : "var(--xp-color-primary-bg)",
-      color: a.src ? void 0 : "var(--xp-color-primary)"
-    })), o = () => {
-      n.value = !0, l("error");
+  setup(e, { emit: o }) {
+    const t = e, s = o, l = S(!1), u = z(() => ({
+      backgroundColor: t.src ? "transparent" : "var(--xp-color-primary-bg)",
+      color: t.src ? void 0 : "var(--xp-color-primary)"
+    })), d = () => {
+      l.value = !0, s("error");
     };
-    return (u, f) => (r(), i("span", {
-      class: $(["xp-avatar", [
+    return (v, h) => (i(), a("span", {
+      class: B(["xp-avatar", [
         `xp-avatar--${e.shape}`,
         `xp-avatar--${e.size}`,
         { "xp-avatar--fit": e.src }
       ]]),
-      style: C(s.value)
+      style: T(u.value)
     }, [
-      e.src && !n.value ? (r(), i("img", {
+      e.src && !l.value ? (i(), a("img", {
         key: 0,
         src: e.src,
         alt: e.alt,
-        onError: o
-      }, null, 40, fe)) : u.$slots.default ? (r(), i("span", he, [
-        b(u.$slots, "default", {}, void 0, !0)
-      ])) : (r(), i("span", me, k(e.alt || "A"), 1))
+        onError: d
+      }, null, 40, Te)) : v.$slots.default ? (i(), a("span", Ve, [
+        y(v.$slots, "default", {}, void 0, !0)
+      ])) : (i(), a("span", je, b(e.alt || "A"), 1))
     ], 6));
   }
-}, be = /* @__PURE__ */ v(ge, [["__scopeId", "data-v-a9a54bc5"]]), xe = { key: 0 }, ve = {
+}, Ae = /* @__PURE__ */ C(Ee, [["__scopeId", "data-v-a9a54bc5"]]), De = { key: 0 }, Ne = {
   __name: "Badge",
   props: {
     value: {
@@ -159,32 +159,32 @@ const v = (e, t) => {
     }
   },
   setup(e) {
-    const t = e, a = w(() => typeof t.value == "number" && t.value > t.max ? `${t.max}+` : t.value), l = w(() => t.value !== 0 && t.value !== "" && t.value !== null && t.value !== void 0);
-    return (n, s) => (r(), i("div", {
-      class: $(["xp-badge", { "xp-badge--dot": e.isDot, "xp-badge--hidden": e.hidden }])
+    const o = e, t = z(() => typeof o.value == "number" && o.value > o.max ? `${o.max}+` : o.value), s = z(() => o.value !== 0 && o.value !== "" && o.value !== null && o.value !== void 0);
+    return (l, u) => (i(), a("div", {
+      class: B(["xp-badge", { "xp-badge--dot": e.isDot, "xp-badge--hidden": e.hidden }])
     }, [
-      b(n.$slots, "default", {}, void 0, !0),
-      !e.hidden && (e.isDot || l.value) ? (r(), i("sup", {
+      y(l.$slots, "default", {}, void 0, !0),
+      !e.hidden && (e.isDot || s.value) ? (i(), a("sup", {
         key: 0,
-        class: $(["xp-badge__content", [
+        class: B(["xp-badge__content", [
           `xp-badge__content--${e.type}`,
           { "xp-badge__content--dot": e.isDot }
         ]])
       }, [
-        e.isDot ? g("", !0) : (r(), i("span", xe, k(a.value), 1))
-      ], 2)) : g("", !0)
+        e.isDot ? x("", !0) : (i(), a("span", De, b(t.value), 1))
+      ], 2)) : x("", !0)
     ], 2));
   }
-}, ye = /* @__PURE__ */ v(ve, [["__scopeId", "data-v-207db6dd"]]), _e = ["disabled"], $e = {
+}, Fe = /* @__PURE__ */ C(Ne, [["__scopeId", "data-v-207db6dd"]]), Re = ["disabled"], Oe = {
   key: 0,
   class: "xp-button__loading"
-}, ke = { class: "xp-button__text" }, we = {
+}, Xe = { class: "xp-button__text" }, Le = {
   __name: "Button",
   props: {
     type: {
       type: String,
       default: "default",
-      validator: (e) => ["primary", "default", "success", "warning", "danger", "info"].includes(e)
+      validator: (e) => ["primary", "default", "success", "warning", "danger", "info", "ghost"].includes(e)
     },
     size: {
       type: String,
@@ -209,12 +209,12 @@ const v = (e, t) => {
     }
   },
   emits: ["click"],
-  setup(e, { emit: t }) {
-    const a = e, l = t, n = (s) => {
-      !a.disabled && !a.loading && l("click", s);
+  setup(e, { emit: o }) {
+    const t = e, s = o, l = (u) => {
+      !t.disabled && !t.loading && s("click", u);
     };
-    return (s, o) => (r(), i("button", {
-      class: $(["xp-button", [
+    return (u, d) => (i(), a("button", {
+      class: B(["xp-button", [
         `xp-button--${e.type}`,
         `xp-button--${e.size}`,
         {
@@ -225,24 +225,24 @@ const v = (e, t) => {
         }
       ]]),
       disabled: e.disabled || e.loading,
-      onClick: n
+      onClick: l
     }, [
-      e.loading ? (r(), i("span", $e)) : g("", !0),
-      c("span", ke, [
-        b(s.$slots, "default", {}, void 0, !0)
+      e.loading ? (i(), a("span", Oe)) : x("", !0),
+      n("span", Xe, [
+        y(u.$slots, "default", {}, void 0, !0)
       ])
-    ], 10, _e));
+    ], 10, Re));
   }
-}, F = /* @__PURE__ */ v(we, [["__scopeId", "data-v-a768661d"]]), Ce = {
+}, K = /* @__PURE__ */ C(Le, [["__scopeId", "data-v-9c6bc634"]]), Pe = {
   key: 0,
   class: "xp-card__header"
-}, Se = { class: "xp-card__title" }, Be = {
+}, He = { class: "xp-card__title" }, We = {
   key: 0,
   class: "xp-card__extra"
-}, Ve = { class: "xp-card__body" }, Te = {
+}, Je = { class: "xp-card__body" }, Ue = {
   key: 1,
   class: "xp-card__footer"
-}, Ie = {
+}, Ge = {
   __name: "Card",
   props: {
     title: {
@@ -264,8 +264,8 @@ const v = (e, t) => {
     }
   },
   setup(e) {
-    return (t, a) => (r(), i("div", {
-      class: $(["xp-card", [
+    return (o, t) => (i(), a("div", {
+      class: B(["xp-card", [
         `xp-card--${e.shadow}`,
         {
           "xp-card--bordered": e.bordered,
@@ -273,23 +273,23 @@ const v = (e, t) => {
         }
       ]])
     }, [
-      e.title || t.$slots.header ? (r(), i("div", Ce, [
-        b(t.$slots, "header", {}, () => [
-          c("h3", Se, k(e.title), 1)
+      e.title || o.$slots.header ? (i(), a("div", Pe, [
+        y(o.$slots, "header", {}, () => [
+          n("h3", He, b(e.title), 1)
         ], !0),
-        t.$slots.extra ? (r(), i("div", Be, [
-          b(t.$slots, "extra", {}, void 0, !0)
-        ])) : g("", !0)
-      ])) : g("", !0),
-      c("div", Ve, [
-        b(t.$slots, "default", {}, void 0, !0)
+        o.$slots.extra ? (i(), a("div", We, [
+          y(o.$slots, "extra", {}, void 0, !0)
+        ])) : x("", !0)
+      ])) : x("", !0),
+      n("div", Je, [
+        y(o.$slots, "default", {}, void 0, !0)
       ]),
-      t.$slots.footer ? (r(), i("div", Te, [
-        b(t.$slots, "footer", {}, void 0, !0)
-      ])) : g("", !0)
+      o.$slots.footer ? (i(), a("div", Ue, [
+        y(o.$slots, "footer", {}, void 0, !0)
+      ])) : x("", !0)
     ], 2));
   }
-}, Re = /* @__PURE__ */ v(Ie, [["__scopeId", "data-v-e65cbe05"]]), Me = { class: "xp-checkbox__input" }, Ne = ["checked", "disabled", ".indeterminate"], Xe = { class: "xp-checkbox__label" }, Ae = {
+}, qe = /* @__PURE__ */ C(Ge, [["__scopeId", "data-v-e65cbe05"]]), Ye = { class: "xp-checkbox__input" }, Ke = ["checked", "disabled", ".indeterminate"], Ze = { class: "xp-checkbox__label" }, Qe = {
   __name: "Checkbox",
   props: {
     modelValue: {
@@ -306,14 +306,14 @@ const v = (e, t) => {
     }
   },
   emits: ["update:modelValue", "change"],
-  setup(e, { emit: t }) {
-    const a = e, l = t, n = (s) => {
-      if (a.disabled) return;
-      const o = s.target.checked;
-      l("update:modelValue", o), l("change", o);
+  setup(e, { emit: o }) {
+    const t = e, s = o, l = (u) => {
+      if (t.disabled) return;
+      const d = u.target.checked;
+      s("update:modelValue", d), s("change", d);
     };
-    return (s, o) => (r(), i("label", {
-      class: $(["xp-checkbox", [
+    return (u, d) => (i(), a("label", {
+      class: B(["xp-checkbox", [
         {
           "xp-checkbox--checked": e.modelValue,
           "xp-checkbox--disabled": e.disabled,
@@ -321,26 +321,101 @@ const v = (e, t) => {
         }
       ]])
     }, [
-      c("span", Me, [
-        o[0] || (o[0] = c("span", { class: "xp-checkbox__inner" }, null, -1)),
-        c("input", {
+      n("span", Ye, [
+        d[0] || (d[0] = n("span", { class: "xp-checkbox__inner" }, null, -1)),
+        n("input", {
           type: "checkbox",
           class: "xp-checkbox__original",
           checked: e.modelValue,
           disabled: e.disabled,
-          onChange: n,
+          onChange: l,
           ".indeterminate": e.indeterminate
-        }, null, 40, Ne)
+        }, null, 40, Ke)
       ]),
-      c("span", Xe, [
-        b(s.$slots, "default", {}, void 0, !0)
+      n("span", Ze, [
+        y(u.$slots, "default", {}, void 0, !0)
       ])
     ], 2));
   }
-}, Oe = /* @__PURE__ */ v(Ae, [["__scopeId", "data-v-7c078f46"]]), je = { class: "xp-dialog__header" }, De = { class: "xp-dialog__title" }, Ee = { class: "xp-dialog__body" }, ze = {
+}, et = /* @__PURE__ */ C(Qe, [["__scopeId", "data-v-7c078f46"]]), tt = {
+  key: 0,
+  class: "xp-menu__divider"
+}, ot = ["disabled", "onClick"], nt = {
+  key: 0,
+  class: "xp-menu__icon",
+  "aria-hidden": "true"
+}, st = { class: "xp-menu__label" }, lt = {
+  __name: "ContextMenu",
+  props: {
+    visible: { type: Boolean, default: !1 },
+    x: { type: Number, default: 0 },
+    y: { type: Number, default: 0 },
+    /**
+     * 菜单项：{ label, icon?, command?, danger?, disabled?, divider?, onClick? }
+     * divider 为 true 时渲染分隔线；select / command 事件与 onClick 三者按需使用
+     */
+    items: { type: Array, default: () => [] }
+  },
+  emits: ["close", "select", "command"],
+  setup(e, { emit: o }) {
+    const t = e, s = o;
+    S(null);
+    const l = z(() => {
+      const f = Math.min(t.items.filter((m) => !m.divider).length, 12) * 32 + 12;
+      let r = t.x, c = t.y;
+      return r + 220 > window.innerWidth - 8 && (r = Math.max(8, window.innerWidth - 220 - 8)), c + f > window.innerHeight - 8 && (c = Math.max(8, window.innerHeight - f - 8)), { left: `${r}px`, top: `${c}px` };
+    });
+    function u() {
+      s("close");
+    }
+    function d(h) {
+      h.disabled || (s("close"), s("select", h), s("command", h.command), h.onClick && h.onClick());
+    }
+    function v(h) {
+      h.key === "Escape" && t.visible && s("close");
+    }
+    return re(() => window.removeEventListener("keydown", v)), (h, f) => (i(), R(J, { to: "body" }, [
+      E(A, { name: "xp-menu" }, {
+        default: j(() => [
+          e.visible ? (i(), a("div", {
+            key: 0,
+            class: "xp-menu-mask",
+            onMousedown: u,
+            onContextmenu: f[2] || (f[2] = D(() => {
+            }, ["prevent"]))
+          }, [
+            n("div", {
+              class: "xp-menu",
+              style: T(l.value),
+              role: "menu",
+              onMousedown: f[0] || (f[0] = D(() => {
+              }, ["stop"])),
+              onMouseup: f[1] || (f[1] = D(() => {
+              }, ["stop"]))
+            }, [
+              (i(!0), a(k, null, V(e.items, (r, c) => (i(), a(k, { key: c }, [
+                r.divider ? (i(), a("div", tt)) : (i(), a("button", {
+                  key: 1,
+                  class: B(["xp-menu__item", { "xp-menu__item--danger": r.danger, "xp-menu__item--disabled": r.disabled }]),
+                  role: "menuitem",
+                  disabled: r.disabled,
+                  onClick: (m) => d(r)
+                }, [
+                  r.icon ? (i(), a("span", nt, b(r.icon), 1)) : x("", !0),
+                  n("span", st, b(r.label), 1)
+                ], 10, ot))
+              ], 64))), 128))
+            ], 36)
+          ], 32)) : x("", !0)
+        ]),
+        _: 1
+      })
+    ]));
+  }
+}, it = /* @__PURE__ */ C(lt, [["__scopeId", "data-v-7477a575"]]), rt = { class: "xp-dialog__header" }, at = { class: "xp-dialog__title" }, dt = { class: "xp-dialog__body" }, ut = {
   key: 0,
   class: "xp-dialog__footer"
-}, Fe = {
+}, ct = {
   __name: "Dialog",
   props: {
     visible: {
@@ -373,78 +448,86 @@ const v = (e, t) => {
     }
   },
   emits: ["confirm", "cancel", "update:visible", "close"],
-  setup(e, { emit: t }) {
-    const a = e, l = t, n = () => {
-      l("update:visible", !1), l("close");
-    }, s = () => {
-      a.closeOnClickModal && n();
-    }, o = () => {
-      l("confirm"), n();
+  setup(e, { emit: o }) {
+    const t = e, s = o, l = () => {
+      s("update:visible", !1), s("close");
     }, u = () => {
-      l("cancel"), n();
+      t.closeOnClickModal && l();
+    }, d = () => {
+      s("confirm"), l();
+    }, v = () => {
+      s("cancel"), l();
     };
-    return (f, p) => (r(), z(L, { to: "body" }, [
-      B(N, { name: "xp-dialog-fade" }, {
-        default: S(() => [
-          e.visible ? (r(), i("div", {
+    function h(f) {
+      f.key === "Escape" && t.visible && l();
+    }
+    return ae(
+      () => t.visible,
+      (f) => {
+        f ? window.addEventListener("keydown", h) : window.removeEventListener("keydown", h);
+      }
+    ), re(() => window.removeEventListener("keydown", h)), (f, r) => (i(), R(J, { to: "body" }, [
+      E(A, { name: "xp-dialog-fade" }, {
+        default: j(() => [
+          e.visible ? (i(), a("div", {
             key: 0,
             class: "xp-dialog__wrapper",
-            onClick: K(s, ["self"])
+            onClick: D(u, ["self"])
           }, [
-            p[0] || (p[0] = c("div", { class: "xp-dialog__mask" }, null, -1)),
-            B(N, {
+            r[0] || (r[0] = n("div", { class: "xp-dialog__mask" }, null, -1)),
+            E(A, {
               name: "xp-dialog-slide",
               appear: ""
             }, {
-              default: S(() => [
-                e.visible ? (r(), i("div", {
+              default: j(() => [
+                e.visible ? (i(), a("div", {
                   key: 0,
                   class: "xp-dialog",
-                  style: C({ width: e.width })
+                  style: T({ width: e.width })
                 }, [
-                  c("div", je, [
-                    c("h3", De, k(e.title), 1),
-                    c("button", {
+                  n("div", rt, [
+                    n("h3", at, b(e.title), 1),
+                    n("button", {
                       class: "xp-dialog__close",
-                      onClick: n
+                      onClick: l
                     }, "×")
                   ]),
-                  c("div", Ee, [
-                    b(f.$slots, "default", {}, void 0, !0)
+                  n("div", dt, [
+                    y(f.$slots, "default", {}, void 0, !0)
                   ]),
-                  f.$slots.footer || e.showDefaultFooter ? (r(), i("div", ze, [
-                    b(f.$slots, "footer", {}, () => [
-                      B(F, { onClick: u }, {
-                        default: S(() => [
-                          X(k(e.cancelButtonText), 1)
+                  f.$slots.footer || e.showDefaultFooter ? (i(), a("div", ut, [
+                    y(f.$slots, "footer", {}, () => [
+                      E(K, { onClick: v }, {
+                        default: j(() => [
+                          H(b(e.cancelButtonText), 1)
                         ]),
                         _: 1
                       }),
-                      B(F, {
+                      E(K, {
                         type: "primary",
-                        onClick: o
+                        onClick: d
                       }, {
-                        default: S(() => [
-                          X(k(e.confirmButtonText), 1)
+                        default: j(() => [
+                          H(b(e.confirmButtonText), 1)
                         ]),
                         _: 1
                       })
                     ], !0)
-                  ])) : g("", !0)
-                ], 4)) : g("", !0)
+                  ])) : x("", !0)
+                ], 4)) : x("", !0)
               ]),
               _: 3
             })
-          ])) : g("", !0)
+          ])) : x("", !0)
         ]),
         _: 3
       })
     ]));
   }
-}, Pe = /* @__PURE__ */ v(Fe, [["__scopeId", "data-v-ef43d114"]]), Le = ["onClick"], Je = { key: 0 }, We = {
+}, pt = /* @__PURE__ */ C(ct, [["__scopeId", "data-v-f85c5a46"]]), ft = ["onClick"], ht = { key: 0 }, mt = {
   key: 1,
   class: "xp-dropdown__divider"
-}, qe = {
+}, vt = {
   __name: "Dropdown",
   props: {
     items: {
@@ -457,78 +540,445 @@ const v = (e, t) => {
     }
   },
   emits: ["select", "command", "open", "close"],
-  setup(e, { emit: t }) {
-    const a = e, l = t, n = _(!1), s = _({}), o = _(null), u = _(null), f = () => {
-      Z(() => {
-        if (!o.value || !u.value) return;
-        const d = o.value.getBoundingClientRect(), y = u.value.getBoundingClientRect();
-        let x = d.bottom + 6, I = d.left;
-        I + y.width > window.innerWidth - 10 && (I = window.innerWidth - y.width - 10), x + y.height > window.innerHeight - 10 && (x = d.top - y.height - 6), s.value = {
-          top: `${x + window.scrollY}px`,
+  setup(e, { emit: o }) {
+    const t = e, s = o, l = S(!1), u = S({}), d = S(null), v = S(null), h = () => {
+      ue(() => {
+        if (!d.value || !v.value) return;
+        const m = d.value.getBoundingClientRect(), w = v.value.getBoundingClientRect();
+        let $ = m.bottom + 6, I = m.left;
+        I + w.width > window.innerWidth - 10 && (I = window.innerWidth - w.width - 10), $ + w.height > window.innerHeight - 10 && ($ = m.top - w.height - 6), u.value = {
+          top: `${$ + window.scrollY}px`,
           left: `${I + window.scrollX}px`
         };
       });
-    }, p = () => {
-      a.disabled || (n.value = !n.value, n.value ? (f(), l("open")) : l("close"));
-    }, m = (d) => {
-      d.disabled || d.divider || (l("select", d), d.command !== void 0 && l("command", d.command, d), n.value = !1, l("close"));
-    }, h = (d) => {
-      var y;
-      n.value && o.value && !o.value.contains(d.target) && !((y = u.value) != null && y.contains(d.target)) && (n.value = !1, l("close"));
+    }, f = () => {
+      t.disabled || (l.value = !l.value, l.value ? (h(), s("open")) : s("close"));
+    }, r = (m) => {
+      m.disabled || m.divider || (s("select", m), m.command !== void 0 && s("command", m.command, m), l.value = !1, s("close"));
+    }, c = (m) => {
+      var w;
+      l.value && d.value && !d.value.contains(m.target) && !((w = v.value) != null && w.contains(m.target)) && (l.value = !1, s("close"));
     };
-    return Q(() => {
-      document.addEventListener("click", h);
-    }), J(() => {
-      document.removeEventListener("click", h);
-    }), (d, y) => (r(), i("div", {
+    return de(() => {
+      document.addEventListener("click", c);
+    }), Q(() => {
+      document.removeEventListener("click", c);
+    }), (m, w) => (i(), a("div", {
       class: "xp-dropdown",
       ref_key: "dropdownRef",
-      ref: o
+      ref: d
     }, [
-      c("div", {
+      n("div", {
         class: "xp-dropdown__trigger",
-        onClick: p
+        onClick: f
       }, [
-        b(d.$slots, "default", {}, void 0, !0)
+        y(m.$slots, "default", {}, void 0, !0)
       ]),
-      (r(), z(L, { to: "body" }, [
-        B(N, { name: "xp-dropdown-fade" }, {
-          default: S(() => [
-            n.value ? (r(), i("div", {
+      (i(), R(J, { to: "body" }, [
+        E(A, { name: "xp-dropdown-fade" }, {
+          default: j(() => [
+            l.value ? (i(), a("div", {
               key: 0,
               class: "xp-dropdown__menu",
-              style: C(s.value),
+              style: T(u.value),
               ref_key: "menuRef",
-              ref: u
+              ref: v
             }, [
-              (r(!0), i(W, null, q(e.items, (x, I) => (r(), i("div", {
+              (i(!0), a(k, null, V(e.items, ($, I) => (i(), a("div", {
                 key: I,
-                class: $(["xp-dropdown__item", { "xp-dropdown__item--disabled": x.disabled, "xp-dropdown__item--divider": x.divider }]),
-                onClick: (Lt) => m(x)
+                class: B(["xp-dropdown__item", { "xp-dropdown__item--disabled": $.disabled, "xp-dropdown__item--divider": $.divider }]),
+                onClick: (te) => r($)
               }, [
-                x.divider ? g("", !0) : (r(), i("span", Je, k(x.label), 1)),
-                x.divider ? (r(), i("span", We)) : g("", !0)
-              ], 10, Le))), 128))
-            ], 4)) : g("", !0)
+                $.divider ? x("", !0) : (i(), a("span", ht, b($.label), 1)),
+                $.divider ? (i(), a("span", mt)) : x("", !0)
+              ], 10, ft))), 128))
+            ], 4)) : x("", !0)
           ]),
           _: 1
         })
       ]))
     ], 512));
   }
-}, He = /* @__PURE__ */ v(qe, [["__scopeId", "data-v-ad741cd8"]]), Ue = {
+}, gt = /* @__PURE__ */ C(vt, [["__scopeId", "data-v-ad741cd8"]]), xt = { class: "xp-empty" }, _t = { class: "xp-empty__title" }, yt = {
+  key: 0,
+  class: "xp-empty__hint"
+}, kt = {
+  key: 1,
+  class: "xp-empty__action"
+}, bt = {
+  __name: "Empty",
+  props: {
+    title: { type: String, default: "暂无内容" },
+    hint: { type: String, default: "" }
+  },
+  setup(e) {
+    return (o, t) => (i(), a("div", xt, [
+      y(o.$slots, "icon", {}, () => [
+        t[0] || (t[0] = n("div", {
+          class: "xp-empty__icon",
+          "aria-hidden": "true"
+        }, [
+          n("svg", {
+            width: "46",
+            height: "46",
+            viewBox: "0 0 24 24",
+            fill: "none"
+          }, [
+            n("path", {
+              d: "M4 7a2 2 0 0 1 2-2h4l2 2h6a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z",
+              stroke: "var(--xp-border-color)",
+              "stroke-width": "1.5",
+              "stroke-linejoin": "round"
+            })
+          ])
+        ], -1))
+      ], !0),
+      n("p", _t, b(e.title), 1),
+      e.hint ? (i(), a("p", yt, b(e.hint), 1)) : x("", !0),
+      o.$slots.default ? (i(), a("div", kt, [
+        y(o.$slots, "default", {}, void 0, !0)
+      ])) : x("", !0)
+    ]));
+  }
+}, wt = /* @__PURE__ */ C(bt, [["__scopeId", "data-v-93d5e1e9"]]), $t = ["width", "height"], Ct = {
+  __name: "FileIcon",
+  props: {
+    type: { type: String, default: "file" },
+    size: { type: Number, default: 20 }
+  },
+  setup(e) {
+    return (o, t) => (i(), a("span", {
+      class: "xp-file-icon",
+      style: T({ width: e.size + "px", height: e.size + "px" }),
+      "aria-hidden": "true"
+    }, [
+      (i(), a("svg", {
+        width: e.size,
+        height: e.size,
+        viewBox: "0 0 24 24",
+        fill: "none"
+      }, [
+        e.type === "folder" ? (i(), a(k, { key: 0 }, [
+          t[0] || (t[0] = n("path", {
+            d: "M3 6.5A2.5 2.5 0 0 1 5.5 4h4l2 2h7A2.5 2.5 0 0 1 21 8.5v9A2.5 2.5 0 0 1 18.5 20h-13A2.5 2.5 0 0 1 3 17.5z",
+            fill: "#E8B64E",
+            "fill-opacity": "0.9"
+          }, null, -1)),
+          t[1] || (t[1] = n("path", {
+            d: "M3 8.5h18v9A2.5 2.5 0 0 1 18.5 20h-13A2.5 2.5 0 0 1 3 17.5z",
+            fill: "#F3CE78"
+          }, null, -1))
+        ], 64)) : e.type === "image" ? (i(), a(k, { key: 1 }, [
+          t[2] || (t[2] = n("rect", {
+            x: "3",
+            y: "4",
+            width: "18",
+            height: "16",
+            rx: "2.4",
+            fill: "#4FA8C9",
+            "fill-opacity": "0.16",
+            stroke: "#3D8EAD",
+            "stroke-width": "1.4"
+          }, null, -1)),
+          t[3] || (t[3] = n("circle", {
+            cx: "9",
+            cy: "10",
+            r: "1.8",
+            fill: "#3D8EAD"
+          }, null, -1)),
+          t[4] || (t[4] = n("path", {
+            d: "M4.4 17.4l4.6-4.4 3 2.8 3.2-3.2 4.4 4.2",
+            stroke: "#3D8EAD",
+            "stroke-width": "1.4",
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            fill: "none"
+          }, null, -1))
+        ], 64)) : e.type === "video" ? (i(), a(k, { key: 2 }, [
+          t[5] || (t[5] = n("rect", {
+            x: "3",
+            y: "5",
+            width: "13",
+            height: "14",
+            rx: "2.4",
+            fill: "#9B5FD1",
+            "fill-opacity": "0.14",
+            stroke: "#8A48C4",
+            "stroke-width": "1.4"
+          }, null, -1)),
+          t[6] || (t[6] = n("path", {
+            d: "M16 10.5l5-3v9l-5-3z",
+            fill: "#8A48C4"
+          }, null, -1))
+        ], 64)) : e.type === "audio" ? (i(), a(k, { key: 3 }, [
+          t[7] || (t[7] = n("path", {
+            d: "M9 18V6l10-2v11",
+            stroke: "#C2569B",
+            "stroke-width": "1.6",
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            fill: "none"
+          }, null, -1)),
+          t[8] || (t[8] = n("circle", {
+            cx: "6.6",
+            cy: "18",
+            r: "2.4",
+            fill: "#C2569B"
+          }, null, -1)),
+          t[9] || (t[9] = n("circle", {
+            cx: "16.6",
+            cy: "15",
+            r: "2.4",
+            fill: "#C2569B"
+          }, null, -1))
+        ], 64)) : e.type === "pdf" ? (i(), a(k, { key: 4 }, [
+          t[10] || (t[10] = n("rect", {
+            x: "4",
+            y: "3",
+            width: "16",
+            height: "18",
+            rx: "2.4",
+            fill: "#D9504A",
+            "fill-opacity": "0.14",
+            stroke: "#C24842",
+            "stroke-width": "1.4"
+          }, null, -1)),
+          t[11] || (t[11] = n("text", {
+            x: "12",
+            y: "16.2",
+            "text-anchor": "middle",
+            "font-size": "9.5",
+            "font-weight": "700",
+            fill: "#C24842",
+            "font-family": "Arial, sans-serif"
+          }, "PDF", -1))
+        ], 64)) : e.type === "doc" ? (i(), a(k, { key: 5 }, [
+          t[12] || (t[12] = n("path", {
+            d: "M5 3.5h9l5 5v12h-14z",
+            fill: "#3B7FD6",
+            "fill-opacity": "0.14",
+            stroke: "#2F6DC0",
+            "stroke-width": "1.4",
+            "stroke-linejoin": "round"
+          }, null, -1)),
+          t[13] || (t[13] = n("path", {
+            d: "M14 3.5v5h5",
+            fill: "none",
+            stroke: "#2F6DC0",
+            "stroke-width": "1.4",
+            "stroke-linejoin": "round"
+          }, null, -1)),
+          t[14] || (t[14] = n("path", {
+            d: "M7.5 12v5M7.5 14.5h3",
+            stroke: "#2F6DC0",
+            "stroke-width": "1.4",
+            "stroke-linecap": "round"
+          }, null, -1)),
+          t[15] || (t[15] = n("path", {
+            d: "M13.5 12h3M13.5 14.5h3M13.5 17h2",
+            stroke: "#2F6DC0",
+            "stroke-width": "1.4",
+            "stroke-linecap": "round"
+          }, null, -1))
+        ], 64)) : e.type === "sheet" ? (i(), a(k, { key: 6 }, [
+          t[16] || (t[16] = n("rect", {
+            x: "4",
+            y: "3.5",
+            width: "16",
+            height: "17",
+            rx: "2.4",
+            fill: "#3E9C5E",
+            "fill-opacity": "0.14",
+            stroke: "#33854F",
+            "stroke-width": "1.4"
+          }, null, -1)),
+          t[17] || (t[17] = n("path", {
+            d: "M4 9h16M4 14h16M10 9v11.5M14.5 9v11.5",
+            stroke: "#33854F",
+            "stroke-width": "1.2",
+            "stroke-linecap": "round"
+          }, null, -1))
+        ], 64)) : e.type === "slide" ? (i(), a(k, { key: 7 }, [
+          t[18] || (t[18] = n("rect", {
+            x: "3",
+            y: "5",
+            width: "18",
+            height: "12",
+            rx: "2.4",
+            fill: "#E09A2F",
+            "fill-opacity": "0.16",
+            stroke: "#CC8420",
+            "stroke-width": "1.4"
+          }, null, -1)),
+          t[19] || (t[19] = n("path", {
+            d: "M12 17v3M9.5 20h5",
+            stroke: "#CC8420",
+            "stroke-width": "1.4",
+            "stroke-linecap": "round"
+          }, null, -1)),
+          t[20] || (t[20] = n("circle", {
+            cx: "9",
+            cy: "10.4",
+            r: "1.3",
+            fill: "#CC8420"
+          }, null, -1)),
+          t[21] || (t[21] = n("path", {
+            d: "M6 14.4l2.8-2.8 2 1.8L14 9.6l4 4.4",
+            stroke: "#CC8420",
+            "stroke-width": "1.4",
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            fill: "none"
+          }, null, -1))
+        ], 64)) : e.type === "archive" ? (i(), a(k, { key: 8 }, [
+          t[22] || (t[22] = n("rect", {
+            x: "4",
+            y: "3.5",
+            width: "16",
+            height: "17",
+            rx: "2.4",
+            fill: "#A97D4E",
+            "fill-opacity": "0.16",
+            stroke: "#8F6539",
+            "stroke-width": "1.4"
+          }, null, -1)),
+          t[23] || (t[23] = n("path", {
+            d: "M9.5 4v16M14.5 4v16M4 12h16",
+            stroke: "#8F6539",
+            "stroke-width": "1.3"
+          }, null, -1))
+        ], 64)) : e.type === "code" ? (i(), a(k, { key: 9 }, [
+          t[24] || (t[24] = n("path", {
+            d: "M8.5 8l-4.5 4 4.5 4M15.5 8l4.5 4-4.5 4",
+            stroke: "#6B62E0",
+            "stroke-width": "1.7",
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            fill: "none"
+          }, null, -1)),
+          t[25] || (t[25] = n("path", {
+            d: "M13.6 5.8l-3.2 12.4",
+            stroke: "#6B62E0",
+            "stroke-width": "1.5",
+            "stroke-linecap": "round"
+          }, null, -1))
+        ], 64)) : e.type === "text" ? (i(), a(k, { key: 10 }, [
+          t[26] || (t[26] = n("path", {
+            d: "M4 6.2C4 5 4.9 4 6.5 4h11C19 4 20 5 20 6.2v11.6C20 19 19 20 17.5 20h-11C4.9 20 4 19 4 17.8z",
+            fill: "#7D8894",
+            "fill-opacity": "0.12",
+            stroke: "#5F6B78",
+            "stroke-width": "1.4"
+          }, null, -1)),
+          t[27] || (t[27] = n("path", {
+            d: "M7.5 8.5h9M7.5 12h6.5",
+            stroke: "#5F6B78",
+            "stroke-width": "1.5",
+            "stroke-linecap": "round"
+          }, null, -1))
+        ], 64)) : (i(), a(k, { key: 11 }, [
+          t[28] || (t[28] = n("path", {
+            d: "M6 3.5h8l5 5v12h-13z",
+            fill: "#A2AAB4",
+            "fill-opacity": "0.16",
+            stroke: "#7C8590",
+            "stroke-width": "1.4",
+            "stroke-linejoin": "round"
+          }, null, -1)),
+          t[29] || (t[29] = n("path", {
+            d: "M14 3.5v5h5",
+            fill: "none",
+            stroke: "#7C8590",
+            "stroke-width": "1.4",
+            "stroke-linejoin": "round"
+          }, null, -1)),
+          t[30] || (t[30] = n("path", {
+            d: "M8 12.5h8M8 15.5h8M8 18.5h5",
+            stroke: "#7C8590",
+            "stroke-width": "1.3",
+            "stroke-linecap": "round"
+          }, null, -1))
+        ], 64))
+      ], 8, $t))
+    ], 4));
+  }
+}, Mt = /* @__PURE__ */ C(Ct, [["__scopeId", "data-v-c598c294"]]), St = '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none"><path d="M4 12h10M10 8l4 4-4 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>', Bt = '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none"><path d="M15 5l-7 7 7 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>', zt = '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none"><path d="M6 9l6 6 6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>', It = '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none"><path d="M6 14l6-6 6 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>', Tt = '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none"><path d="M6 6l12 12M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>', Vt = '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none"><path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><path d="M12 11v5M9.5 13.5h5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>', jt = '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none"><path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></svg>', Et = '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none"><path d="M9 5l7 7-7 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>', At = '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none"><rect x="4" y="4" width="6" height="6" rx="1.2" stroke="currentColor" stroke-width="1.8"/><rect x="14" y="4" width="6" height="6" rx="1.2" stroke="currentColor" stroke-width="1.8"/><rect x="4" y="14" width="6" height="6" rx="1.2" stroke="currentColor" stroke-width="1.8"/><rect x="14" y="14" width="6" height="6" rx="1.2" stroke="currentColor" stroke-width="1.8"/></svg>', Dt = '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none"><path d="M4 11l8-7 8 7v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/><path d="M10 21v-6h4v6" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/></svg>', Nt = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M330.666667 512c0-14.933333 4.266667-29.866667 14.933333-40.533333l234.666667-277.33333399c23.466667-27.733333 64-29.866667 89.6-8.53333301 27.733333 23.466667 29.866667 64 8.53333299 89.6L477.866667 512l200.53333299 236.8c23.466667 27.733333 19.19999999 68.266667-8.53333299 89.6-27.733333 23.466667-68.266667 19.19999999-89.6-8.53333301l-234.666667-277.33333399c-10.666667-10.666667-14.933333-25.6-14.933333-40.533333z"  /></svg>', Ft = '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none"><path d="M4 6h16M4 12h16M4 18h16" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>', Rt = '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none"><path d="M20 12a8 8 0 1 1-2.34-5.66M20 4v5h-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>', Ot = '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none"><circle cx="12" cy="12" r="3.2" stroke="currentColor" stroke-width="1.8"/><path d="M12 2.8v2.6M12 18.6v2.6M2.8 12h2.6M18.6 12h2.6M5.5 5.5l1.8 1.8M16.7 16.7l1.8 1.8M18.5 5.5l-1.8 1.8M7.3 16.7l-1.8 1.8" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>', Xt = '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none"><path d="M12 3.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8L3.5 9.7l5.9-.9z" fill="currentColor" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/></svg>', Lt = '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none"><path d="M12 3.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8L3.5 9.7l5.9-.9z" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/></svg>', Pt = '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none"><path d="M12 19V6M6 12l6-6 6 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>', Ht = '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none"><path d="M12 16V5M7.5 9.5L12 5l4.5 4.5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/><path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>', Wt = ["viewBox", "innerHTML"], Jt = {
+  key: 2,
+  class: "xp-icon__fallback"
+}, Ut = {
+  __name: "Icon",
+  props: {
+    name: {
+      type: String,
+      default: ""
+    },
+    size: {
+      type: [String, Number],
+      default: "medium"
+    },
+    color: {
+      type: String,
+      default: ""
+    },
+    spin: {
+      type: Boolean,
+      default: !1
+    },
+    rotate: {
+      type: Number,
+      default: 0
+    }
+  },
+  setup(e) {
+    const o = ["small", "medium", "large"], t = e, s = /* @__PURE__ */ Object.assign({ "./icons/arrow-right.svg": St, "./icons/back.svg": Bt, "./icons/chevron-down.svg": zt, "./icons/chevron-up.svg": It, "./icons/close.svg": Tt, "./icons/folder-add.svg": Vt, "./icons/folder.svg": jt, "./icons/forward.svg": Et, "./icons/grid.svg": At, "./icons/home.svg": Dt, "./icons/jiantou.svg": Nt, "./icons/list.svg": Ft, "./icons/refresh.svg": Rt, "./icons/settings.svg": Ot, "./icons/star-fill.svg": Xt, "./icons/star.svg": Lt, "./icons/up.svg": Pt, "./icons/upload.svg": Ht }), l = (r) => r && r.replace(/\bfill\s*=\s*["'](?!none["'])[^"']+["']/gi, 'fill="currentColor"').replace(/\bstroke\s*=\s*["'](?!none["'])[^"']+["']/gi, 'stroke="currentColor"'), u = z(() => {
+      if (!t.name) return null;
+      const r = `./icons/${t.name}.svg`, c = s[r];
+      if (!c) return null;
+      const m = c.match(/<svg[^>]*>([\s\S]*)<\/svg>/i), w = l(m ? m[1] : c), $ = c.match(/viewBox\s*=\s*["']([^"']+)["']/i);
+      return {
+        inner: w,
+        viewBox: $ ? $[1] : "0 0 24 24"
+      };
+    }), d = z(() => o.includes(String(t.size))), v = z(() => {
+      if (d.value) return null;
+      const r = t.size;
+      return typeof r == "number" ? `${r}px` : typeof r == "string" && r.trim() ? /^\d+(\.\d+)?$/.test(r.trim()) ? `${r}px` : r.trim() : null;
+    }), h = z(() => {
+      const r = [];
+      return d.value && r.push(`xp-icon--${t.size}`), t.spin && r.push("xp-icon--spin"), r;
+    }), f = z(() => {
+      const r = {};
+      return t.color && (r.color = t.color), t.rotate && (r.transform = `rotate(${t.rotate}deg)`), v.value && (r.width = v.value, r.height = v.value, r.fontSize = v.value), r;
+    });
+    return (r, c) => (i(), a("i", {
+      class: B(["xp-icon", h.value]),
+      style: T(f.value)
+    }, [
+      r.$slots.default ? y(r.$slots, "default", { key: 0 }, void 0, !0) : u.value ? (i(), a("svg", {
+        key: 1,
+        viewBox: u.value.viewBox,
+        innerHTML: u.value.inner
+      }, null, 8, Wt)) : (i(), a("span", Jt, "?"))
+    ], 6));
+  }
+}, Gt = /* @__PURE__ */ C(Ut, [["__scopeId", "data-v-9ed9f36d"]]), qt = {
   key: 0,
   class: "xp-input__prefix"
-}, Ye = ["type", "value", "placeholder", "disabled", "maxlength"], Ge = {
+}, Yt = ["id", "type", "value", "placeholder", "disabled", "maxlength"], Kt = {
   key: 2,
   class: "xp-input__suffix"
-}, Ke = {
+}, Zt = {
   __name: "Input",
   props: {
     modelValue: {
       type: [String, Number],
       default: ""
     },
+    /** 原生 input 的 id，用于配合 label[for] 聚焦 */
+    id: {
+      type: String,
+      default: ""
+    },
     type: {
       type: String,
       default: "text",
@@ -557,57 +1007,62 @@ const v = (e, t) => {
     }
   },
   emits: ["update:modelValue", "focus", "blur", "clear"],
-  setup(e, { emit: t }) {
-    const a = t, l = _(null), n = _(!1), s = (p) => {
-      a("update:modelValue", p.target.value);
-    }, o = (p) => {
-      n.value = !0, a("focus", p);
-    }, u = (p) => {
-      n.value = !1, a("blur", p);
+  setup(e, { expose: o, emit: t }) {
+    const s = t, l = S(null), u = S(!1), d = (r) => {
+      s("update:modelValue", r.target.value);
+    }, v = (r) => {
+      u.value = !0, s("focus", r);
+    }, h = (r) => {
+      u.value = !1, s("blur", r);
     }, f = () => {
-      a("update:modelValue", ""), a("clear"), l.value && l.value.focus();
+      s("update:modelValue", ""), s("clear"), l.value && l.value.focus();
     };
-    return (p, m) => (r(), i("div", {
-      class: $(["xp-input", [
+    return o({
+      focus: () => l.value && l.value.focus(),
+      select: () => l.value && l.value.select(),
+      blur: () => l.value && l.value.blur()
+    }), (r, c) => (i(), a("div", {
+      class: B(["xp-input", [
         `xp-input--${e.size}`,
         {
           "xp-input--disabled": e.disabled,
-          "xp-input--prefix": p.$slots.prefix,
-          "xp-input--suffix": p.$slots.suffix || e.showClear,
-          "xp-input--focus": n.value
+          "xp-input--prefix": r.$slots.prefix,
+          "xp-input--suffix": r.$slots.suffix || e.showClear,
+          "xp-input--focus": u.value
         }
       ]])
     }, [
-      p.$slots.prefix ? (r(), i("span", Ue, [
-        b(p.$slots, "prefix", {}, void 0, !0)
-      ])) : g("", !0),
-      c("input", {
+      r.$slots.prefix ? (i(), a("span", qt, [
+        y(r.$slots, "prefix", {}, void 0, !0)
+      ])) : x("", !0),
+      n("input", {
         ref_key: "inputRef",
         ref: l,
         class: "xp-input__inner",
+        id: e.id || void 0,
         type: e.type,
         value: e.modelValue,
         placeholder: e.placeholder,
         disabled: e.disabled,
         maxlength: e.maxlength,
-        onInput: s,
-        onFocus: o,
-        onBlur: u
-      }, null, 40, Ye),
-      e.showClear && e.modelValue && !e.disabled ? (r(), i("span", {
+        onInput: d,
+        onFocus: v,
+        onBlur: h
+      }, null, 40, Yt),
+      e.showClear && e.modelValue && !e.disabled ? (i(), a("span", {
         key: 1,
         class: "xp-input__clear",
         onClick: f
-      }, "×")) : g("", !0),
-      p.$slots.suffix && !e.showClear ? (r(), i("span", Ge, [
-        b(p.$slots, "suffix", {}, void 0, !0)
-      ])) : g("", !0)
+      }, "×")) : x("", !0),
+      r.$slots.suffix && !e.showClear ? (i(), a("span", Kt, [
+        y(r.$slots, "suffix", {}, void 0, !0)
+      ])) : x("", !0)
     ], 2));
   }
-}, Qe = /* @__PURE__ */ v(Ke, [["__scopeId", "data-v-f671ef9a"]]), Ze = { class: "xp-progress__bar" }, et = {
+}, Qt = /* @__PURE__ */ C(Zt, [["__scopeId", "data-v-46247483"]]), eo = {
   key: 0,
   class: "xp-progress__text"
-}, tt = {
+}, to = {
   __name: "Progress",
   props: {
     percentage: {
@@ -632,27 +1087,37 @@ const v = (e, t) => {
       type: String,
       default: "",
       validator: (e) => ["", "success", "warning", "exception"].includes(e)
+    },
+    /** line 模式下进度条轨道/内条高度（px），用于紧凑场景 */
+    strokeWidth: {
+      type: Number,
+      default: 8
     }
   },
   setup(e) {
-    const t = e, a = w(() => t.color ? t.color : t.status === "success" ? "var(--xp-color-success)" : t.status === "warning" ? "var(--xp-color-warning)" : t.status === "exception" ? "var(--xp-color-danger)" : "var(--xp-color-primary)");
-    return (l, n) => (r(), i("div", {
-      class: $(["xp-progress", [`xp-progress--${e.type}`]])
+    const o = e, t = z(
+      () => o.type === "line" ? { height: `${o.strokeWidth}px` } : {}
+    ), s = z(() => o.color ? o.color : o.status === "success" ? "var(--xp-color-success)" : o.status === "warning" ? "var(--xp-color-warning)" : o.status === "exception" ? "var(--xp-color-danger)" : "var(--xp-color-primary)");
+    return (l, u) => (i(), a("div", {
+      class: B(["xp-progress", [`xp-progress--${e.type}`]])
     }, [
-      c("div", Ze, [
-        c("div", {
+      n("div", {
+        class: "xp-progress__bar",
+        style: T(t.value)
+      }, [
+        n("div", {
           class: "xp-progress__inner",
-          style: C({ width: `${e.percentage}%`, backgroundColor: a.value })
+          style: T({ width: `${e.percentage}%`, backgroundColor: s.value })
         }, null, 4)
-      ]),
-      e.showText ? (r(), i("span", et, [
-        b(l.$slots, "default", {}, () => [
-          X(k(e.percentage) + "%", 1)
+      ], 4),
+      e.showText ? (i(), a("span", eo, [
+        y(l.$slots, "default", {}, () => [
+          H(b(e.percentage) + "%", 1)
         ], !0)
-      ])) : g("", !0)
+      ])) : x("", !0)
     ], 2));
   }
-}, at = /* @__PURE__ */ v(tt, [["__scopeId", "data-v-a95933c8"]]), lt = { class: "xp-radio__input" }, nt = ["checked", "disabled"], ot = { class: "xp-radio__label" }, st = {
+}, oo = /* @__PURE__ */ C(to, [["__scopeId", "data-v-244dca2c"]]), no = { class: "xp-radio__input" }, so = ["checked", "disabled"], lo = { class: "xp-radio__label" }, io = {
   __name: "Radio",
   props: {
     modelValue: {
@@ -669,37 +1134,37 @@ const v = (e, t) => {
     }
   },
   emits: ["update:modelValue", "change"],
-  setup(e, { emit: t }) {
-    const a = e, l = t, n = () => {
-      a.disabled || (l("update:modelValue", a.value), l("change", a.value));
+  setup(e, { emit: o }) {
+    const t = e, s = o, l = () => {
+      t.disabled || (s("update:modelValue", t.value), s("change", t.value));
     };
-    return (s, o) => (r(), i("label", {
-      class: $(["xp-radio", [
+    return (u, d) => (i(), a("label", {
+      class: B(["xp-radio", [
         {
           "xp-radio--checked": e.modelValue === e.value,
           "xp-radio--disabled": e.disabled
         }
       ]])
     }, [
-      c("span", lt, [
-        o[0] || (o[0] = c("span", { class: "xp-radio__inner" }, null, -1)),
-        c("input", {
+      n("span", no, [
+        d[0] || (d[0] = n("span", { class: "xp-radio__inner" }, null, -1)),
+        n("input", {
           type: "radio",
           class: "xp-radio__original",
           checked: e.modelValue === e.value,
           disabled: e.disabled,
-          onChange: n
-        }, null, 40, nt)
+          onChange: l
+        }, null, 40, so)
       ]),
-      c("span", ot, [
-        b(s.$slots, "default", {}, void 0, !0)
+      n("span", lo, [
+        y(u.$slots, "default", {}, void 0, !0)
       ])
     ], 2));
   }
-}, rt = /* @__PURE__ */ v(st, [["__scopeId", "data-v-02a0d80d"]]), it = { class: "xp-rate" }, dt = ["onClick", "onMouseenter"], ct = { class: "xp-rate__star" }, ut = {
+}, ro = /* @__PURE__ */ C(io, [["__scopeId", "data-v-02a0d80d"]]), ao = { class: "xp-rate" }, uo = ["onClick", "onMouseenter"], co = { class: "xp-rate__star" }, po = {
   key: 0,
   class: "xp-rate__text"
-}, pt = {
+}, fo = {
   __name: "Rate",
   props: {
     modelValue: {
@@ -724,39 +1189,39 @@ const v = (e, t) => {
     }
   },
   emits: ["update:modelValue", "change"],
-  setup(e, { emit: t }) {
-    const a = e, l = t, n = _(0), s = w(() => n.value || a.modelValue), o = (f) => {
-      const p = s.value - f + 1;
-      return p >= 1 ? 100 : p > 0 ? p * 100 : 0;
-    }, u = (f) => {
-      a.disabled || (l("update:modelValue", f), l("change", f));
+  setup(e, { emit: o }) {
+    const t = e, s = o, l = S(0), u = z(() => l.value || t.modelValue), d = (h) => {
+      const f = u.value - h + 1;
+      return f >= 1 ? 100 : f > 0 ? f * 100 : 0;
+    }, v = (h) => {
+      t.disabled || (s("update:modelValue", h), s("change", h));
     };
-    return (f, p) => (r(), i("div", it, [
-      (r(!0), i(W, null, q(e.max, (m) => (r(), i("span", {
-        key: m,
-        class: $(["xp-rate__item", {
+    return (h, f) => (i(), a("div", ao, [
+      (i(!0), a(k, null, V(e.max, (r) => (i(), a("span", {
+        key: r,
+        class: B(["xp-rate__item", {
           "xp-rate__item--disabled": e.disabled
         }]),
-        style: C({ cursor: e.disabled ? "default" : "pointer" }),
-        onClick: (h) => u(m),
-        onMouseenter: (h) => n.value = m,
-        onMouseleave: p[0] || (p[0] = (h) => n.value = 0)
+        style: T({ cursor: e.disabled ? "default" : "pointer" }),
+        onClick: (c) => v(r),
+        onMouseenter: (c) => l.value = r,
+        onMouseleave: f[0] || (f[0] = (c) => l.value = 0)
       }, [
-        c("span", ct, [
-          c("span", {
+        n("span", co, [
+          f[1] || (f[1] = n("span", { class: "xp-rate__star-outer" }, "★", -1)),
+          n("span", {
             class: "xp-rate__star-inner",
-            style: C({ width: o(m) + "%", color: e.color })
-          }, " ★ ", 4),
-          p[1] || (p[1] = c("span", { class: "xp-rate__star-outer" }, "★", -1))
+            style: T({ width: d(r) + "%", color: e.color })
+          }, " ★ ", 4)
         ])
-      ], 46, dt))), 128)),
-      e.showText && !e.disabled ? (r(), i("span", ut, k(e.modelValue) + " / " + k(e.max), 1)) : g("", !0)
+      ], 46, uo))), 128)),
+      e.showText && !e.disabled ? (i(), a("span", po, b(e.modelValue) + " / " + b(e.max), 1)) : x("", !0)
     ]));
   }
-}, ft = /* @__PURE__ */ v(pt, [["__scopeId", "data-v-17bb0933"]]), ht = ["aria-checked"], mt = {
+}, ho = /* @__PURE__ */ C(fo, [["__scopeId", "data-v-214323a3"]]), mo = ["aria-checked"], vo = {
   key: 0,
   class: "xp-switch__label"
-}, gt = {
+}, go = {
   __name: "Switch",
   props: {
     modelValue: {
@@ -774,14 +1239,14 @@ const v = (e, t) => {
     }
   },
   emits: ["update:modelValue", "change"],
-  setup(e, { emit: t }) {
-    const a = e, l = t, n = () => {
-      if (a.disabled) return;
-      const s = !a.modelValue;
-      l("update:modelValue", s), l("change", s);
+  setup(e, { emit: o }) {
+    const t = e, s = o, l = () => {
+      if (t.disabled) return;
+      const u = !t.modelValue;
+      s("update:modelValue", u), s("change", u);
     };
-    return (s, o) => (r(), i("div", {
-      class: $(["xp-switch", [
+    return (u, d) => (i(), a("div", {
+      class: B(["xp-switch", [
         `xp-switch--${e.size}`,
         {
           "xp-switch--checked": e.modelValue,
@@ -790,20 +1255,20 @@ const v = (e, t) => {
       ]]),
       role: "switch",
       "aria-checked": e.modelValue,
-      onClick: n
+      onClick: l
     }, [
-      o[0] || (o[0] = c("span", { class: "xp-switch__core" }, [
-        c("span", { class: "xp-switch__action" })
+      d[0] || (d[0] = n("span", { class: "xp-switch__core" }, [
+        n("span", { class: "xp-switch__action" })
       ], -1)),
-      s.$slots.default ? (r(), i("span", mt, [
-        b(s.$slots, "default", {}, void 0, !0)
-      ])) : g("", !0)
-    ], 10, ht));
+      u.$slots.default ? (i(), a("span", vo, [
+        y(u.$slots, "default", {}, void 0, !0)
+      ])) : x("", !0)
+    ], 10, mo));
   }
-}, bt = /* @__PURE__ */ v(gt, [["__scopeId", "data-v-5a5e33c5"]]), xt = {
+}, xo = /* @__PURE__ */ C(go, [["__scopeId", "data-v-5a5e33c5"]]), _o = {
   key: 0,
   class: "xp-tab-pane"
-}, vt = {
+}, yo = {
   __name: "TabPane",
   props: {
     name: {
@@ -820,19 +1285,19 @@ const v = (e, t) => {
     }
   },
   setup(e) {
-    const t = e, a = oe("xpTabs", null), l = w(() => a ? a.currentValue.value === t.name : !0);
-    return Q(() => {
-      a && a.addTab && a.addTab({ name: t.name, title: t.title, disabled: t.disabled });
-    }), J(() => {
-      a && a.removeTab && a.removeTab(t.name);
-    }), (n, s) => l.value ? (r(), i("div", xt, [
-      b(n.$slots, "default", {}, void 0, !0)
-    ])) : g("", !0);
+    const o = e, t = ke("xpTabs", null), s = z(() => t ? t.currentValue.value === o.name : !0);
+    return de(() => {
+      t && t.addTab && t.addTab({ name: o.name, title: o.title, disabled: o.disabled });
+    }), Q(() => {
+      t && t.removeTab && t.removeTab(o.name);
+    }), (l, u) => s.value ? (i(), a("div", _o, [
+      y(l.$slots, "default", {}, void 0, !0)
+    ])) : x("", !0);
   }
-}, yt = /* @__PURE__ */ v(vt, [["__scopeId", "data-v-6fe7943a"]]), _t = { class: "xp-tabs" }, $t = {
+}, ko = /* @__PURE__ */ C(yo, [["__scopeId", "data-v-6fe7943a"]]), bo = { class: "xp-tabs" }, wo = {
   class: "xp-tabs__nav",
   role: "tablist"
-}, kt = ["onClick"], wt = { class: "xp-tabs__content" }, Ct = {
+}, $o = ["onClick"], Co = { class: "xp-tabs__content" }, Mo = {
   __name: "Tabs",
   props: {
     modelValue: {
@@ -841,48 +1306,48 @@ const v = (e, t) => {
     }
   },
   emits: ["update:modelValue", "change"],
-  setup(e, { emit: t }) {
-    const a = e, l = t, n = _([]), s = w(() => {
-      var m;
-      return a.modelValue !== null && a.modelValue !== void 0 && a.modelValue !== "" ? a.modelValue : ((m = n.value[0]) == null ? void 0 : m.name) ?? null;
-    }), o = w(() => {
-      const m = n.value.findIndex((d) => d.name === s.value);
+  setup(e, { emit: o }) {
+    const t = e, s = o, l = S([]), u = z(() => {
+      var r;
+      return t.modelValue !== null && t.modelValue !== void 0 && t.modelValue !== "" ? t.modelValue : ((r = l.value[0]) == null ? void 0 : r.name) ?? null;
+    }), d = z(() => {
+      const r = l.value.findIndex((m) => m.name === u.value);
       return {
-        transform: `translateX(${(m >= 0 ? m : 0) * 100}%)`,
-        width: `${n.value.length ? 100 / n.value.length : 0}%`
+        transform: `translateX(${(r >= 0 ? r : 0) * 100}%)`,
+        width: `${l.value.length ? 100 / l.value.length : 0}%`
       };
-    }), u = (m) => {
-      m.disabled || (l("update:modelValue", m.name), l("change", m.name));
+    }), v = (r) => {
+      r.disabled || (s("update:modelValue", r.name), s("change", r.name));
     };
-    return se("xpTabs", { addTab: (m) => {
-      n.value.find((h) => h.name === m.name) || n.value.push(m);
-    }, removeTab: (m) => {
-      const h = n.value.findIndex((d) => d.name === m);
-      h >= 0 && n.value.splice(h, 1);
-    }, currentValue: s }), (m, h) => (r(), i("div", _t, [
-      c("div", $t, [
-        (r(!0), i(W, null, q(n.value, (d, y) => (r(), i("div", {
-          key: d.name || y,
-          class: $(["xp-tabs__item", [
+    return be("xpTabs", { addTab: (r) => {
+      l.value.find((c) => c.name === r.name) || l.value.push(r);
+    }, removeTab: (r) => {
+      const c = l.value.findIndex((m) => m.name === r);
+      c >= 0 && l.value.splice(c, 1);
+    }, currentValue: u }), (r, c) => (i(), a("div", bo, [
+      n("div", wo, [
+        (i(!0), a(k, null, V(l.value, (m, w) => (i(), a("div", {
+          key: m.name || w,
+          class: B(["xp-tabs__item", [
             {
-              "xp-tabs__item--active": s.value === d.name,
-              "xp-tabs__item--disabled": d.disabled
+              "xp-tabs__item--active": u.value === m.name,
+              "xp-tabs__item--disabled": m.disabled
             }
           ]]),
           role: "tab",
-          onClick: (x) => u(d)
-        }, k(d.title), 11, kt))), 128)),
-        c("div", {
+          onClick: ($) => v(m)
+        }, b(m.title), 11, $o))), 128)),
+        n("div", {
           class: "xp-tabs__active-bar",
-          style: C(o.value)
+          style: T(d.value)
         }, null, 4)
       ]),
-      c("div", wt, [
-        b(m.$slots, "default", {}, void 0, !0)
+      n("div", Co, [
+        y(r.$slots, "default", {}, void 0, !0)
       ])
     ]));
   }
-}, St = /* @__PURE__ */ v(Ct, [["__scopeId", "data-v-3e658dba"]]), Bt = {
+}, So = /* @__PURE__ */ C(Mo, [["__scopeId", "data-v-3e658dba"]]), Bo = {
   __name: "Tag",
   props: {
     type: {
@@ -913,18 +1378,18 @@ const v = (e, t) => {
     }
   },
   emits: ["click", "close"],
-  setup(e, { emit: t }) {
-    const a = e, l = t, n = w(() => a.color ? a.color.startsWith("#") || a.color.startsWith("rgb") ? {
-      backgroundColor: a.color,
-      borderColor: a.color,
+  setup(e, { emit: o }) {
+    const t = e, s = o, l = z(() => t.color ? t.color.startsWith("#") || t.color.startsWith("rgb") ? {
+      backgroundColor: t.color,
+      borderColor: t.color,
       color: "#fff"
-    } : {} : {}), s = (u) => {
-      l("click", u);
-    }, o = (u) => {
-      l("close", u);
+    } : {} : {}), u = (v) => {
+      s("click", v);
+    }, d = (v) => {
+      s("close", v);
     };
-    return (u, f) => (r(), i("span", {
-      class: $(["xp-tag", [
+    return (v, h) => (i(), a("span", {
+      class: B(["xp-tag", [
         `xp-tag--${e.type}`,
         `xp-tag--${e.size}`,
         {
@@ -933,179 +1398,81 @@ const v = (e, t) => {
           "xp-tag--closable": e.closable
         }
       ]]),
-      style: C(n.value),
-      onClick: s
+      style: T(l.value),
+      onClick: u
     }, [
-      b(u.$slots, "default", {}, void 0, !0),
-      e.closable ? (r(), i("span", {
+      y(v.$slots, "default", {}, void 0, !0),
+      e.closable ? (i(), a("span", {
         key: 0,
         class: "xp-tag__close",
-        onClick: K(o, ["stop"])
-      }, "×")) : g("", !0)
+        onClick: D(d, ["stop"])
+      }, "×")) : x("", !0)
     ], 6));
   }
-}, Vt = /* @__PURE__ */ v(Bt, [["__scopeId", "data-v-903813de"]]), Tt = { class: "xp-tooltip__content" }, It = {
-  __name: "Tooltip",
-  props: {
-    content: {
-      type: String,
-      default: ""
-    },
-    placement: {
-      type: String,
-      default: "top",
-      validator: (e) => ["top", "bottom", "left", "right"].includes(e)
-    },
-    trigger: {
-      type: String,
-      default: "hover",
-      validator: (e) => ["hover", "click", "manual"].includes(e)
-    },
-    disabled: {
-      type: Boolean,
-      default: !1
-    }
-  },
-  setup(e) {
-    const t = e, a = _(!1), l = _({}), n = _(null), s = _(null);
-    let o = null;
-    const u = () => {
-      Z(() => {
-        if (!n.value || !s.value) return;
-        const h = n.value.getBoundingClientRect(), d = s.value.getBoundingClientRect();
-        let y = 0, x = 0;
-        switch (t.placement) {
-          case "top":
-            y = h.top - d.height - 8, x = h.left + h.width / 2 - d.width / 2;
-            break;
-          case "bottom":
-            y = h.bottom + 8, x = h.left + h.width / 2 - d.width / 2;
-            break;
-          case "left":
-            y = h.top + h.height / 2 - d.height / 2, x = h.left - d.width - 8;
-            break;
-          case "right":
-            y = h.top + h.height / 2 - d.height / 2, x = h.right + 8;
-            break;
-        }
-        l.value = {
-          top: `${y + window.scrollY}px`,
-          left: `${x + window.scrollX}px`
-        };
-      });
-    }, f = () => {
-      t.disabled || (clearTimeout(o), o = setTimeout(() => {
-        a.value = !0, u();
-      }, 100));
-    }, p = () => {
-      clearTimeout(o), o = setTimeout(() => {
-        a.value = !1;
-      }, 150);
-    }, m = () => {
-      t.trigger !== "click" || t.disabled || (a.value = !a.value, a.value && u());
-    };
-    return J(() => {
-      clearTimeout(o);
-    }), (h, d) => (r(), i("div", {
-      class: "xp-tooltip",
-      ref_key: "tooltipRef",
-      ref: n
-    }, [
-      c("div", {
-        class: "xp-tooltip__trigger",
-        onMouseenter: f,
-        onMouseleave: p,
-        onClick: m
-      }, [
-        b(h.$slots, "default", {}, void 0, !0)
-      ], 32),
-      (r(), z(L, { to: "body" }, [
-        B(N, { name: "xp-tooltip-fade" }, {
-          default: S(() => [
-            a.value ? (r(), i("div", {
-              key: 0,
-              class: $(["xp-tooltip__popper", [`xp-tooltip__popper--${e.placement}`]]),
-              style: C(l.value),
-              ref_key: "popperRef",
-              ref: s
-            }, [
-              c("div", Tt, [
-                b(h.$slots, "content", {}, () => [
-                  X(k(e.content), 1)
-                ], !0)
-              ]),
-              d[0] || (d[0] = c("div", { class: "xp-tooltip__arrow" }, null, -1))
-            ], 6)) : g("", !0)
-          ]),
-          _: 3
-        })
-      ]))
-    ], 512));
-  }
-}, Rt = /* @__PURE__ */ v(It, [["__scopeId", "data-v-6d9af40b"]]), Mt = /^#?([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/, Nt = /^rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,\s*([\d.]+))?\s*\)$/;
-function E(e) {
+}, zo = /* @__PURE__ */ C(Bo, [["__scopeId", "data-v-903813de"]]), Io = /^#?([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/, To = /^rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,\s*([\d.]+))?\s*\)$/;
+function Y(e) {
   if (typeof e != "string") return null;
-  const t = e.trim(), a = t.match(Mt);
-  if (a) {
-    let n = a[1];
-    n.length === 3 && (n = n.split("").map((f) => f + f).join(""));
-    const s = parseInt(n.slice(0, 2), 16), o = parseInt(n.slice(2, 4), 16), u = parseInt(n.slice(4, 6), 16);
-    return { r: s, g: o, b: u, a: 1 };
+  const o = e.trim(), t = o.match(Io);
+  if (t) {
+    let l = t[1];
+    l.length === 3 && (l = l.split("").map((h) => h + h).join(""));
+    const u = parseInt(l.slice(0, 2), 16), d = parseInt(l.slice(2, 4), 16), v = parseInt(l.slice(4, 6), 16);
+    return { r: u, g: d, b: v, a: 1 };
   }
-  const l = t.match(Nt);
-  return l ? {
-    r: parseInt(l[1], 10),
-    g: parseInt(l[2], 10),
-    b: parseInt(l[3], 10),
-    a: l[4] ? parseFloat(l[4]) : 1
+  const s = o.match(To);
+  return s ? {
+    r: parseInt(s[1], 10),
+    g: parseInt(s[2], 10),
+    b: parseInt(s[3], 10),
+    a: s[4] ? parseFloat(s[4]) : 1
   } : null;
 }
-function Xt(e) {
+function Vo(e) {
   return Math.max(0, Math.min(255, Math.round(e)));
 }
-function At(e, t, a) {
-  const l = (n) => Xt(n).toString(16).padStart(2, "0");
-  return "#" + l(e) + l(t) + l(a);
+function jo(e, o, t) {
+  const s = (l) => Vo(l).toString(16).padStart(2, "0");
+  return "#" + s(e) + s(o) + s(t);
 }
-function ee(e, t, a = 0.5) {
-  const l = E(e), n = E(t);
-  if (!l || !n) return "#000000";
-  const s = Math.max(0, Math.min(1, a)), o = l.r * (1 - s) + n.r * s, u = l.g * (1 - s) + n.g * s, f = l.b * (1 - s) + n.b * s;
-  return At(o, u, f);
+function pe(e, o, t = 0.5) {
+  const s = Y(e), l = Y(o);
+  if (!s || !l) return "#000000";
+  const u = Math.max(0, Math.min(1, t)), d = s.r * (1 - u) + l.r * u, v = s.g * (1 - u) + l.g * u, h = s.b * (1 - u) + l.b * u;
+  return jo(d, v, h);
 }
-function j(e, t) {
-  return ee(e, "#ffffff", t);
+function G(e, o) {
+  return pe(e, "#ffffff", o);
 }
-function D(e, t) {
-  return ee(e, "#000000", t);
+function q(e, o) {
+  return pe(e, "#000000", o);
 }
-function Wt(e) {
-  return j(e, 0.3);
+function jn(e) {
+  return G(e, 0.3);
 }
-function qt(e) {
-  return D(e, 0.2);
+function En(e) {
+  return q(e, 0.2);
 }
-function Ht(e, t) {
-  const a = E(e);
-  if (!a) return e;
-  const l = Math.max(0, Math.min(1, t));
-  return `rgba(${a.r}, ${a.g}, ${a.b}, ${l})`;
+function An(e, o) {
+  const t = Y(e);
+  if (!t) return e;
+  const s = Math.max(0, Math.min(1, o));
+  return `rgba(${t.r}, ${t.g}, ${t.b}, ${s})`;
 }
-function Ut(e) {
-  const t = E(e);
-  return t ? (t.r * 299 + t.g * 587 + t.b * 114) / 1e3 < 128 : !1;
+function Dn(e) {
+  const o = Y(e);
+  return o ? (o.r * 299 + o.g * 587 + o.b * 114) / 1e3 < 128 : !1;
 }
-function te(e, t) {
-  const a = j(e, 0.3), l = D(e, 0.2), n = t === "dark" ? D(e, 0.85) : j(e, 0.9), s = t === "dark" ? D(e, 0.7) : j(e, 0.7);
-  return { base: e, light: a, dark: l, bg: n, border: s };
+function fe(e, o) {
+  const t = G(e, 0.3), s = q(e, 0.2), l = o === "dark" ? q(e, 0.85) : G(e, 0.9), u = o === "dark" ? q(e, 0.7) : G(e, 0.7);
+  return { base: e, light: t, dark: s, bg: l, border: u };
 }
-const V = {
+const N = {
   primary: "#409eff",
   success: "#67c23a",
   warning: "#e6a23c",
   danger: "#f56c6c",
   info: "#909399"
-}, A = {
+}, W = {
   light: {
     text: { primary: "#303133", regular: "#606266", secondary: "#909399", placeholder: "#c0c4cc" },
     border: { base: "#dcdfe6", light: "#ebeef5", lighter: "#f2f6fc" },
@@ -1131,83 +1498,83 @@ const V = {
     }
   }
 };
-function T() {
+function F() {
   return {
-    primary: { ...V },
-    light: U(A.light),
-    dark: U(A.dark)
+    primary: { ...N },
+    light: se(W.light),
+    dark: se(W.dark)
   };
 }
-function U(e) {
+function se(e) {
   return JSON.parse(JSON.stringify(e));
 }
-function Y(e, t) {
-  const a = ["primary", "success", "warning", "danger", "info"], l = [];
-  for (const n of a) {
-    const s = e[n] || V[n], o = te(s, t);
-    l.push(`  --xp-color-${n}: ${s};`), l.push(`  --xp-color-${n}-light: ${o.light};`), l.push(`  --xp-color-${n}-dark: ${o.dark};`), l.push(`  --xp-color-${n}-bg: ${o.bg};`), l.push(`  --xp-color-${n}-border: ${o.border};`);
+function le(e, o) {
+  const t = ["primary", "success", "warning", "danger", "info"], s = [];
+  for (const l of t) {
+    const u = e[l] || N[l], d = fe(u, o);
+    s.push(`  --xp-color-${l}: ${u};`), s.push(`  --xp-color-${l}-light: ${d.light};`), s.push(`  --xp-color-${l}-dark: ${d.dark};`), s.push(`  --xp-color-${l}-bg: ${d.bg};`), s.push(`  --xp-color-${l}-border: ${d.border};`);
   }
-  return l.join(`
+  return s.join(`
 `);
 }
-function G(e) {
-  const t = [];
-  for (const a of Object.keys(e.text)) t.push(`  --xp-text-color-${a}: ${e.text[a]};`);
-  t.push(`  --xp-border-color: ${e.border.base};`), t.push(`  --xp-border-color-light: ${e.border.light};`), t.push(`  --xp-border-color-lighter: ${e.border.lighter};`);
-  for (const a of Object.keys(e.bg)) {
-    const l = a === "base" ? "" : `-${a}`;
-    t.push(`  --xp-bg-color${l}: ${e.bg[a]};`);
+function ie(e) {
+  const o = [];
+  for (const t of Object.keys(e.text)) o.push(`  --xp-text-color-${t}: ${e.text[t]};`);
+  o.push(`  --xp-border-color: ${e.border.base};`), o.push(`  --xp-border-color-light: ${e.border.light};`), o.push(`  --xp-border-color-lighter: ${e.border.lighter};`);
+  for (const t of Object.keys(e.bg)) {
+    const s = t === "base" ? "" : `-${t}`;
+    o.push(`  --xp-bg-color${s}: ${e.bg[t]};`);
   }
-  for (const a of Object.keys(e.fill)) {
-    const l = a === "base" ? "" : `-${a}`;
-    t.push(`  --xp-fill-color${l}: ${e.fill[a]};`);
+  for (const t of Object.keys(e.fill)) {
+    const s = t === "base" ? "" : `-${t}`;
+    o.push(`  --xp-fill-color${s}: ${e.fill[t]};`);
   }
-  for (const a of Object.keys(e.shadow)) t.push(`  --xp-shadow-${a}: ${e.shadow[a]};`);
-  return t.join(`
+  for (const t of Object.keys(e.shadow)) o.push(`  --xp-shadow-${t}: ${e.shadow[t]};`);
+  return o.join(`
 `);
 }
-function Ot(e, t) {
-  const a = {}, l = e.primary || V, n = ["primary", "success", "warning", "danger", "info"];
-  for (const o of n) {
-    const u = l[o] || V[o], f = te(u, t);
-    a[`--xp-color-${o}`] = u, a[`--xp-color-${o}-light`] = f.light, a[`--xp-color-${o}-dark`] = f.dark, a[`--xp-color-${o}-bg`] = f.bg, a[`--xp-color-${o}-border`] = f.border;
+function Eo(e, o) {
+  const t = {}, s = e.primary || N, l = ["primary", "success", "warning", "danger", "info"];
+  for (const d of l) {
+    const v = s[d] || N[d], h = fe(v, o);
+    t[`--xp-color-${d}`] = v, t[`--xp-color-${d}-light`] = h.light, t[`--xp-color-${d}-dark`] = h.dark, t[`--xp-color-${d}-bg`] = h.bg, t[`--xp-color-${d}-border`] = h.border;
   }
-  const s = e[t] || A[t];
-  for (const o of Object.keys(s.text)) a[`--xp-text-color-${o}`] = s.text[o];
-  a["--xp-border-color"] = s.border.base, a["--xp-border-color-light"] = s.border.light, a["--xp-border-color-lighter"] = s.border.lighter;
-  for (const o of Object.keys(s.bg)) a[`--xp-bg-color${o === "base" ? "" : "-" + o}`] = s.bg[o];
-  for (const o of Object.keys(s.fill)) a[`--xp-fill-color${o === "base" ? "" : "-" + o}`] = s.fill[o];
-  for (const o of Object.keys(s.shadow)) a[`--xp-shadow-${o}`] = s.shadow[o];
-  return a;
+  const u = e[o] || W[o];
+  for (const d of Object.keys(u.text)) t[`--xp-text-color-${d}`] = u.text[d];
+  t["--xp-border-color"] = u.border.base, t["--xp-border-color-light"] = u.border.light, t["--xp-border-color-lighter"] = u.border.lighter;
+  for (const d of Object.keys(u.bg)) t[`--xp-bg-color${d === "base" ? "" : "-" + d}`] = u.bg[d];
+  for (const d of Object.keys(u.fill)) t[`--xp-fill-color${d === "base" ? "" : "-" + d}`] = u.fill[d];
+  for (const d of Object.keys(u.shadow)) t[`--xp-shadow-${d}`] = u.shadow[d];
+  return t;
 }
-function ae(e) {
+function he(e) {
   return [
     ':root, [data-theme="light"] {',
-    Y(e.primary || V, "light"),
-    G(e.light || A.light),
+    le(e.primary || N, "light"),
+    ie(e.light || W.light),
     "}",
     "",
     '[data-theme="dark"] {',
-    Y(e.primary || V, "dark"),
-    G(e.dark || A.dark),
+    le(e.primary || N, "dark"),
+    ie(e.dark || W.dark),
     "}"
   ].join(`
 `);
 }
-let O = null;
-function jt() {
+let U = null;
+function Ao() {
   if (typeof document > "u") return null;
-  if (O && document.contains(O)) return O;
+  if (U && document.contains(U)) return U;
   let e = document.querySelector("style[data-xp-ui-theme]");
-  return e || (e = document.createElement("style"), e.setAttribute("data-xp-ui-theme", "true"), document.head.appendChild(e)), O = e, e;
+  return e || (e = document.createElement("style"), e.setAttribute("data-xp-ui-theme", "true"), document.head.appendChild(e)), U = e, e;
 }
-function Dt(e) {
-  const t = jt();
-  t && (t.textContent = ae(e));
+function Do(e) {
+  const o = Ao();
+  o && (o.textContent = he(e));
 }
-const H = _("light"), le = _(T());
-function R(e) {
-  if (["light", "dark"].includes(e) && (H.value = e, typeof document < "u")) {
+const ee = S("light"), me = S(F());
+function L(e) {
+  if (["light", "dark"].includes(e) && (ee.value = e, typeof document < "u")) {
     document.documentElement.setAttribute("data-theme", e);
     try {
       localStorage.setItem("xp-ui-theme", e);
@@ -1215,128 +1582,552 @@ function R(e) {
     }
   }
 }
-function Et() {
-  R(H.value === "light" ? "dark" : "light");
+function No() {
+  L(ee.value === "light" ? "dark" : "light");
 }
-function M(e) {
+function P(e) {
   if (!e) return;
-  const t = T();
-  e.primary && (t.primary = { ...t.primary, ...e.primary }), e.light && (t.light = P(t.light, e.light)), e.dark && (t.dark = P(t.dark, e.dark)), le.value = t, Dt(t);
+  const o = F();
+  e.primary && (o.primary = { ...o.primary, ...e.primary }), e.light && (o.light = Z(o.light, e.light)), e.dark && (o.dark = Z(o.dark, e.dark)), me.value = o, Do(o);
   try {
-    localStorage.setItem("xp-ui-theme-config", JSON.stringify(t));
+    localStorage.setItem("xp-ui-theme-config", JSON.stringify(o));
   } catch {
   }
 }
-function zt() {
-  M(T());
+function Fo() {
+  P(F());
 }
-function Ft() {
+function Ro() {
   if (typeof document > "u") return;
   let e = null;
   try {
     e = localStorage.getItem("xp-ui-theme");
   } catch {
   }
-  e === "light" || e === "dark" ? R(e) : typeof window < "u" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? R("dark") : R("light");
-  let t = null;
+  e === "light" || e === "dark" ? L(e) : typeof window < "u" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? L("dark") : L("light");
+  let o = null;
   try {
-    t = localStorage.getItem("xp-ui-theme-config");
+    o = localStorage.getItem("xp-ui-theme-config");
   } catch {
   }
-  if (t)
+  if (o)
     try {
-      M(JSON.parse(t));
+      P(JSON.parse(o));
     } catch {
-      M(T());
+      P(F());
     }
   else
-    M(T());
+    P(F());
 }
-function P(e, t) {
-  if (!t || typeof t != "object") return e;
-  const a = Array.isArray(e) ? [...e] : { ...e };
-  for (const l of Object.keys(t))
-    t[l] && typeof t[l] == "object" && !Array.isArray(t[l]) ? a[l] = P(e[l] || {}, t[l]) : a[l] = t[l];
-  return a;
+function Z(e, o) {
+  if (!o || typeof o != "object") return e;
+  const t = Array.isArray(e) ? [...e] : { ...e };
+  for (const s of Object.keys(o))
+    o[s] && typeof o[s] == "object" && !Array.isArray(o[s]) ? t[s] = Z(e[s] || {}, o[s]) : t[s] = o[s];
+  return t;
 }
-function Yt() {
+function Oo() {
+  return {
+    theme: ee,
+    themeConfig: me,
+    setTheme: L,
+    toggleTheme: No,
+    initTheme: Ro,
+    applyThemeConfig: P,
+    resetThemeConfig: Fo,
+    getDefaultThemeConfig: F,
+    buildCssString: he,
+    buildCssVars: Eo
+  };
+}
+const Xo = ["data-theme"], Lo = { class: "xp-theme-customizer__header" }, Po = { class: "xp-theme-customizer__body" }, Ho = { class: "xp-theme-customizer__section" }, Wo = { class: "xp-theme-customizer__modes" }, Jo = ["onClick"], Uo = { class: "xp-theme-customizer__section" }, Go = { class: "xp-theme-customizer__grid" }, qo = { class: "xp-theme-customizer__label" }, Yo = { class: "xp-theme-customizer__input" }, Ko = ["value", "onInput"], Zo = ["value", "onChange"], Qo = { class: "xp-theme-customizer__section" }, en = { class: "xp-theme-customizer__grid" }, tn = { class: "xp-theme-customizer__label" }, on = { class: "xp-theme-customizer__input" }, nn = ["value", "onInput"], sn = ["value", "onChange"], ln = { class: "xp-theme-customizer__section" }, rn = { class: "xp-theme-customizer__grid" }, an = { class: "xp-theme-customizer__label" }, dn = { class: "xp-theme-customizer__input" }, un = ["value", "onInput"], cn = ["value", "onChange"], pn = { class: "xp-theme-customizer__section" }, fn = { class: "xp-theme-customizer__grid" }, hn = { class: "xp-theme-customizer__label" }, mn = { class: "xp-theme-customizer__input" }, vn = ["value", "onInput"], gn = ["value", "onChange"], xn = { class: "xp-theme-customizer__label" }, _n = { class: "xp-theme-customizer__input" }, yn = ["value", "onInput"], kn = ["value", "onChange"], bn = {
+  __name: "ThemeCustomizer",
+  props: {
+    modelValue: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: o }) {
+    const { theme: t, applyThemeConfig: s, resetThemeConfig: l, getDefaultThemeConfig: u, buildCssString: d, themeConfig: v } = Oo(), h = {
+      primary: "主色",
+      success: "成功",
+      warning: "警告",
+      danger: "危险",
+      info: "信息",
+      regular: "常规",
+      secondary: "次要",
+      placeholder: "占位",
+      base: "基础",
+      page: "页面",
+      soft: "柔和",
+      light: "亮",
+      lighter: "更亮"
+    }, f = S("light"), r = S(null), c = we(m(v.value));
+    ae(v, (M) => Object.assign(c, m(M)), { deep: !0 });
+    function m(M) {
+      return JSON.parse(JSON.stringify(M));
+    }
+    function w(M) {
+      if (!M) return "#ffffff";
+      if (/^#([0-9a-f]{6})$/i.test(M)) return M.toLowerCase();
+      const g = M.match(/rgba?\(\s*(\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})/);
+      return g ? "#" + [g[1], g[2], g[3]].map((p) => Number(p).toString(16).padStart(2, "0")).join("") : "#ffffff";
+    }
+    function $(M, g) {
+      c.primary[M] = g, s(c);
+    }
+    function I(M, g, p) {
+      c[f.value][M][g] = p, s(c);
+    }
+    function te() {
+      l();
+    }
+    function ge() {
+      oe("xp-ui-theme.json", JSON.stringify(c, null, 2), "application/json");
+    }
+    function xe() {
+      oe("xp-ui-theme.css", d(c), "text/css");
+    }
+    function _e() {
+      r.value && r.value.click();
+    }
+    function ye(M) {
+      const g = M.target.files && M.target.files[0];
+      if (!g) return;
+      const p = new FileReader();
+      p.onload = () => {
+        try {
+          const _ = JSON.parse(p.result);
+          s(_);
+        } catch (_) {
+          alert(`主题配置解析失败：
+` + _.message);
+        } finally {
+          M.target.value = "";
+        }
+      }, p.readAsText(g);
+    }
+    function oe(M, g, p) {
+      const _ = new Blob([g], { type: p + ";charset=utf-8" }), ne = URL.createObjectURL(_), O = document.createElement("a");
+      O.href = ne, O.download = M, document.body.appendChild(O), O.click(), O.remove(), setTimeout(() => URL.revokeObjectURL(ne), 0);
+    }
+    return (M, g) => (i(), a(k, null, [
+      E(A, { name: "xp-fade" }, {
+        default: j(() => [
+          e.modelValue ? (i(), a("div", {
+            key: 0,
+            class: "xp-theme-customizer-backdrop",
+            onClick: g[0] || (g[0] = D((p) => M.$emit("update:modelValue", !1), ["self"]))
+          })) : x("", !0)
+        ]),
+        _: 1
+      }),
+      E(A, { name: "xp-slide" }, {
+        default: j(() => [
+          e.modelValue ? (i(), a("aside", {
+            key: 0,
+            class: "xp-theme-customizer",
+            "data-theme": ce(t)
+          }, [
+            n("header", Lo, [
+              g[2] || (g[2] = n("div", { class: "xp-theme-customizer__title" }, "🎨 主题定制", -1)),
+              n("button", {
+                class: "xp-theme-customizer__close",
+                onClick: g[1] || (g[1] = (p) => M.$emit("update:modelValue", !1)),
+                "aria-label": "关闭"
+              }, "✕")
+            ]),
+            n("div", Po, [
+              n("section", Ho, [
+                g[3] || (g[3] = n("p", { class: "xp-theme-customizer__desc" }, " 修改下方颜色即可改变整个示例/库的外观。导出后可直接放进你自己的项目中应用。 ", -1)),
+                n("div", Wo, [
+                  (i(), a(k, null, V(["light", "dark"], (p) => n("button", {
+                    key: p,
+                    class: B(["xp-theme-customizer__mode-btn", { "is-active": f.value === p }]),
+                    onClick: (_) => f.value = p
+                  }, b(p === "light" ? "浅色" : "暗黑"), 11, Jo)), 64))
+                ])
+              ]),
+              n("section", Uo, [
+                g[4] || (g[4] = n("h3", { class: "xp-theme-customizer__h" }, "主色", -1)),
+                n("div", Go, [
+                  (i(), a(k, null, V(["primary", "success", "warning", "danger", "info"], (p) => n("div", {
+                    key: p,
+                    class: "xp-theme-customizer__item"
+                  }, [
+                    n("div", qo, b(h[p]), 1),
+                    n("div", Yo, [
+                      n("input", {
+                        type: "color",
+                        value: c.primary[p],
+                        onInput: (_) => $(p, _.target.value)
+                      }, null, 40, Ko),
+                      n("input", {
+                        type: "text",
+                        value: c.primary[p],
+                        onChange: (_) => $(p, _.target.value)
+                      }, null, 40, Zo)
+                    ])
+                  ])), 64))
+                ])
+              ]),
+              n("section", Qo, [
+                g[5] || (g[5] = n("h3", { class: "xp-theme-customizer__h" }, "文本", -1)),
+                n("div", en, [
+                  (i(), a(k, null, V(["primary", "regular", "secondary", "placeholder"], (p) => n("div", {
+                    key: "t-" + p,
+                    class: "xp-theme-customizer__item"
+                  }, [
+                    n("div", tn, b(h[p]), 1),
+                    n("div", on, [
+                      n("input", {
+                        type: "color",
+                        value: w(c[f.value].text[p]),
+                        onInput: (_) => I("text", p, _.target.value)
+                      }, null, 40, nn),
+                      n("input", {
+                        type: "text",
+                        value: c[f.value].text[p],
+                        onChange: (_) => I("text", p, _.target.value)
+                      }, null, 40, sn)
+                    ])
+                  ])), 64))
+                ])
+              ]),
+              n("section", ln, [
+                g[6] || (g[6] = n("h3", { class: "xp-theme-customizer__h" }, "背景", -1)),
+                n("div", rn, [
+                  (i(), a(k, null, V(["base", "page", "soft"], (p) => n("div", {
+                    key: "bg-" + p,
+                    class: "xp-theme-customizer__item"
+                  }, [
+                    n("div", an, b(h[p]), 1),
+                    n("div", dn, [
+                      n("input", {
+                        type: "color",
+                        value: w(c[f.value].bg[p]),
+                        onInput: (_) => I("bg", p, _.target.value)
+                      }, null, 40, un),
+                      n("input", {
+                        type: "text",
+                        value: c[f.value].bg[p],
+                        onChange: (_) => I("bg", p, _.target.value)
+                      }, null, 40, cn)
+                    ])
+                  ])), 64))
+                ])
+              ]),
+              n("section", pn, [
+                g[7] || (g[7] = n("h3", { class: "xp-theme-customizer__h" }, "边框 / 填充", -1)),
+                n("div", fn, [
+                  (i(), a(k, null, V(["base", "light", "lighter"], (p) => n("div", {
+                    key: "bd-" + p,
+                    class: "xp-theme-customizer__item"
+                  }, [
+                    n("div", hn, "边框 - " + b(h[p]), 1),
+                    n("div", mn, [
+                      n("input", {
+                        type: "color",
+                        value: w(c[f.value].border[p]),
+                        onInput: (_) => I("border", p, _.target.value)
+                      }, null, 40, vn),
+                      n("input", {
+                        type: "text",
+                        value: c[f.value].border[p],
+                        onChange: (_) => I("border", p, _.target.value)
+                      }, null, 40, gn)
+                    ])
+                  ])), 64)),
+                  (i(), a(k, null, V(["base", "light", "lighter"], (p) => n("div", {
+                    key: "fl-" + p,
+                    class: "xp-theme-customizer__item"
+                  }, [
+                    n("div", xn, "填充 - " + b(h[p]), 1),
+                    n("div", _n, [
+                      n("input", {
+                        type: "color",
+                        value: w(c[f.value].fill[p]),
+                        onInput: (_) => I("fill", p, _.target.value)
+                      }, null, 40, yn),
+                      n("input", {
+                        type: "text",
+                        value: c[f.value].fill[p],
+                        onChange: (_) => I("fill", p, _.target.value)
+                      }, null, 40, kn)
+                    ])
+                  ])), 64))
+                ])
+              ]),
+              g[8] || (g[8] = n("section", { class: "xp-theme-customizer__section" }, [
+                n("h3", { class: "xp-theme-customizer__h" }, "实时预览"),
+                n("div", { class: "xp-theme-customizer__preview" }, [
+                  n("div", { class: "xp-preview-row" }, [
+                    n("button", { class: "xp-preview-btn xp-preview-btn--primary" }, "Primary"),
+                    n("button", { class: "xp-preview-btn xp-preview-btn--success" }, "Success"),
+                    n("button", { class: "xp-preview-btn xp-preview-btn--warning" }, "Warning"),
+                    n("button", { class: "xp-preview-btn xp-preview-btn--danger" }, "Danger")
+                  ]),
+                  n("div", { class: "xp-preview-text xp-preview-text--primary" }, "主标题文本"),
+                  n("div", { class: "xp-preview-text" }, "正文内容样例 Regular text"),
+                  n("div", { class: "xp-preview-text xp-preview-text--secondary" }, "次要提示")
+                ])
+              ], -1))
+            ]),
+            n("footer", { class: "xp-theme-customizer__footer" }, [
+              n("button", {
+                class: "xp-theme-customizer__action",
+                onClick: te
+              }, "恢复默认"),
+              n("button", {
+                class: "xp-theme-customizer__action xp-theme-customizer__action--secondary",
+                onClick: _e
+              }, "导入 JSON"),
+              n("button", {
+                class: "xp-theme-customizer__action xp-theme-customizer__action--primary",
+                onClick: ge
+              }, "导出 JSON"),
+              n("button", {
+                class: "xp-theme-customizer__action xp-theme-customizer__action--primary",
+                onClick: xe
+              }, "导出 CSS")
+            ]),
+            n("input", {
+              ref_key: "importFileInput",
+              ref: r,
+              type: "file",
+              accept: "application/json,.json,.txt",
+              class: "xp-theme-customizer__hidden",
+              onChange: ye
+            }, null, 544)
+          ], 8, Xo)) : x("", !0)
+        ]),
+        _: 1
+      })
+    ], 64));
+  }
+}, X = S([]);
+let wn = 0;
+function Nn() {
+  function e(o, t = "info", s = 2600) {
+    const l = ++wn;
+    X.value.push({ id: l, message: o, type: t }), setTimeout(() => {
+      const u = X.value.findIndex((d) => d.id === l);
+      u >= 0 && X.value.splice(u, 1);
+    }, s);
+  }
   return {
-    theme: H,
-    themeConfig: le,
-    setTheme: R,
-    toggleTheme: Et,
-    initTheme: Ft,
-    applyThemeConfig: M,
-    resetThemeConfig: zt,
-    getDefaultThemeConfig: T,
-    buildCssString: ae,
-    buildCssVars: Ot
+    toasts: X,
+    toast: e,
+    success: (o) => e(o, "success", 2200),
+    error: (o) => e(o, "error", 3600),
+    info: (o) => e(o, "info"),
+    warn: (o) => e(o, "warn", 2800)
   };
 }
-const ne = {
-  XpAlert: pe,
-  XpAvatar: be,
-  XpBadge: ye,
-  XpButton: F,
-  XpCard: Re,
-  XpCheckbox: Oe,
-  XpDialog: Pe,
-  XpDropdown: He,
-  XpInput: Qe,
-  XpProgress: at,
-  XpRadio: rt,
-  XpRate: ft,
-  XpSwitch: bt,
-  XpTabPane: yt,
-  XpTabs: St,
-  XpTag: Vt,
-  XpTooltip: Rt
-}, Pt = (e) => {
-  Object.entries(ne).forEach(([t, a]) => {
-    e.component(t, a);
+const $n = {
+  class: "xp-toast-wrap",
+  "aria-live": "polite"
+}, Cn = { class: "xp-toast__msg" }, Mn = {
+  __name: "Toast",
+  setup(e) {
+    return (o, t) => (i(), R(J, { to: "body" }, [
+      n("div", $n, [
+        E($e, { name: "xp-toast" }, {
+          default: j(() => [
+            (i(!0), a(k, null, V(ce(X), (s) => (i(), a("div", {
+              key: s.id,
+              class: B(["xp-toast", `xp-toast--${s.type}`])
+            }, [
+              t[0] || (t[0] = n("span", {
+                class: "xp-toast__dot",
+                "aria-hidden": "true"
+              }, null, -1)),
+              n("span", Cn, b(s.message), 1)
+            ], 2))), 128))
+          ]),
+          _: 1
+        })
+      ])
+    ]));
+  }
+}, Sn = /* @__PURE__ */ C(Mn, [["__scopeId", "data-v-b564201c"]]), Bn = { class: "xp-tooltip__content" }, zn = {
+  __name: "Tooltip",
+  props: {
+    content: {
+      type: String,
+      default: ""
+    },
+    placement: {
+      type: String,
+      default: "top",
+      validator: (e) => ["top", "bottom", "left", "right"].includes(e)
+    },
+    trigger: {
+      type: String,
+      default: "hover",
+      validator: (e) => ["hover", "click", "manual"].includes(e)
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  setup(e) {
+    const o = e, t = S(!1), s = S({}), l = S(null), u = S(null);
+    let d = null;
+    const v = () => {
+      ue(() => {
+        if (!l.value || !u.value) return;
+        const c = l.value.getBoundingClientRect(), m = u.value.getBoundingClientRect();
+        let w = 0, $ = 0;
+        switch (o.placement) {
+          case "top":
+            w = c.top - m.height - 8, $ = c.left + c.width / 2 - m.width / 2;
+            break;
+          case "bottom":
+            w = c.bottom + 8, $ = c.left + c.width / 2 - m.width / 2;
+            break;
+          case "left":
+            w = c.top + c.height / 2 - m.height / 2, $ = c.left - m.width - 8;
+            break;
+          case "right":
+            w = c.top + c.height / 2 - m.height / 2, $ = c.right + 8;
+            break;
+        }
+        s.value = {
+          top: `${w + window.scrollY}px`,
+          left: `${$ + window.scrollX}px`
+        };
+      });
+    }, h = () => {
+      o.disabled || (clearTimeout(d), d = setTimeout(() => {
+        t.value = !0, v();
+      }, 100));
+    }, f = () => {
+      clearTimeout(d), d = setTimeout(() => {
+        t.value = !1;
+      }, 150);
+    }, r = () => {
+      o.trigger !== "click" || o.disabled || (t.value = !t.value, t.value && v());
+    };
+    return Q(() => {
+      clearTimeout(d);
+    }), (c, m) => (i(), a("div", {
+      class: "xp-tooltip",
+      ref_key: "tooltipRef",
+      ref: l
+    }, [
+      n("div", {
+        class: "xp-tooltip__trigger",
+        onMouseenter: h,
+        onMouseleave: f,
+        onClick: r
+      }, [
+        y(c.$slots, "default", {}, void 0, !0)
+      ], 32),
+      (i(), R(J, { to: "body" }, [
+        E(A, { name: "xp-tooltip-fade" }, {
+          default: j(() => [
+            t.value ? (i(), a("div", {
+              key: 0,
+              class: B(["xp-tooltip__popper", [`xp-tooltip__popper--${e.placement}`]]),
+              style: T(s.value),
+              ref_key: "popperRef",
+              ref: u
+            }, [
+              n("div", Bn, [
+                y(c.$slots, "content", {}, () => [
+                  H(b(e.content), 1)
+                ], !0)
+              ]),
+              m[0] || (m[0] = n("div", { class: "xp-tooltip__arrow" }, null, -1))
+            ], 6)) : x("", !0)
+          ]),
+          _: 3
+        })
+      ]))
+    ], 512));
+  }
+}, In = /* @__PURE__ */ C(zn, [["__scopeId", "data-v-6d9af40b"]]), ve = {
+  XpAlert: Ie,
+  XpAvatar: Ae,
+  XpBadge: Fe,
+  XpButton: K,
+  XpCard: qe,
+  XpCheckbox: et,
+  XpContextMenu: it,
+  XpDialog: pt,
+  XpDropdown: gt,
+  XpEmpty: wt,
+  XpFileIcon: Mt,
+  XpIcon: Gt,
+  XpInput: Qt,
+  XpProgress: oo,
+  XpRadio: ro,
+  XpRate: ho,
+  XpSwitch: xo,
+  XpTabPane: ko,
+  XpTabs: So,
+  XpTag: zo,
+  XpThemeCustomizer: bn,
+  XpToast: Sn,
+  XpTooltip: In
+}, Tn = (e) => {
+  Object.entries(ve).forEach(([o, t]) => {
+    e.component(o, t);
   });
-}, Gt = {
-  install: Pt,
-  ...ne
+}, Fn = {
+  install: Tn,
+  ...ve
 };
 export {
-  V as DEFAULT_PRIMARY,
-  A as DEFAULT_TOKENS,
-  pe as XpAlert,
-  be as XpAvatar,
-  ye as XpBadge,
-  F as XpButton,
-  Re as XpCard,
-  Oe as XpCheckbox,
-  Pe as XpDialog,
-  He as XpDropdown,
-  Qe as XpInput,
-  at as XpProgress,
-  rt as XpRadio,
-  ft as XpRate,
-  bt as XpSwitch,
-  yt as XpTabPane,
-  St as XpTabs,
-  Vt as XpTag,
-  Rt as XpTooltip,
-  M as applyThemeConfig,
-  ae as buildCssString,
-  Ot as buildCssVars,
-  D as darken,
-  Gt as default,
-  qt as deriveDark,
-  Wt as deriveLight,
-  T as getDefaultThemeConfig,
-  Ft as initTheme,
-  Pt as install,
-  Ut as isDark,
-  j as lighten,
-  ee as mix,
-  E as parseColor,
-  zt as resetThemeConfig,
-  R as setTheme,
-  At as toHex,
-  Et as toggleTheme,
-  Yt as useTheme,
-  Ht as withAlpha
+  N as DEFAULT_PRIMARY,
+  W as DEFAULT_TOKENS,
+  Ie as XpAlert,
+  Ae as XpAvatar,
+  Fe as XpBadge,
+  K as XpButton,
+  qe as XpCard,
+  et as XpCheckbox,
+  it as XpContextMenu,
+  pt as XpDialog,
+  gt as XpDropdown,
+  wt as XpEmpty,
+  Mt as XpFileIcon,
+  Gt as XpIcon,
+  Qt as XpInput,
+  oo as XpProgress,
+  ro as XpRadio,
+  ho as XpRate,
+  xo as XpSwitch,
+  ko as XpTabPane,
+  So as XpTabs,
+  zo as XpTag,
+  bn as XpThemeCustomizer,
+  Sn as XpToast,
+  In as XpTooltip,
+  P as applyThemeConfig,
+  he as buildCssString,
+  Eo as buildCssVars,
+  q as darken,
+  Fn as default,
+  En as deriveDark,
+  jn as deriveLight,
+  F as getDefaultThemeConfig,
+  Ro as initTheme,
+  Tn as install,
+  Dn as isDark,
+  G as lighten,
+  pe as mix,
+  Y as parseColor,
+  Fo as resetThemeConfig,
+  L as setTheme,
+  jo as toHex,
+  X as toasts,
+  No as toggleTheme,
+  Oo as useTheme,
+  Nn as useToast,
+  An as withAlpha
 };