@huyooo/ui 0.11.2 → 0.11.5

package/dist/WidthContainer-B6d4xrGT.js

@@ -0,0 +1,693 @@
+/* empty css               */
+import "./index-D3Kp6R4z.js";
+import { defineComponent as P, ref as U, watch as V, openBlock as t, createElementBlock as n, createElementVNode as s, createVNode as o, unref as u, withCtx as x, createTextVNode as H, renderSlot as N, toDisplayString as I, createCommentVNode as M, onMounted as j, onUnmounted as he, normalizeClass as S, Fragment as L, renderList as E, createBlock as pe, computed as B, onBeforeUnmount as fe, normalizeStyle as W } from "vue";
+import { Spin as q } from "@arco-design/web-vue";
+import { u as F, a as J } from "./useAuthkitUsersProfile-CQGyvL7g.js";
+import { d as _e, b as ve, a as ge } from "./apiClients-DVz12LeW.js";
+import { u as D } from "./useAuthkitAppsAuthPageInfo-Du5d6VK-.js";
+import { b as Q, f as X, w as G, a as Y, c as Z, d as ee, e as ye } from "./useSEO-CvfzTZA9.js";
+import "./useUploadCos-N5pim6q1.js";
+import { useRouter as te, useRoute as ne } from "vue-router";
+import "./useUserMenu-ClPBlvaM.js";
+import { U as ke, c as oe, h as se, k as ae, _ as re, f as ie, j as ue, d as le, g as K, i as ce } from "./UserMenuInvitationsItem.vue_vue_type_script_setup_true_lang-DpVadjMH.js";
+/* empty css               */
+import { Icon as R } from "@iconify/vue";
+import "./Clipboard-CRZDADLE.js";
+/* empty css               */
+import { M as be } from "./Menu-Cy2ZPeaz.js";
+import "./CollapseItem-DUzZA6tx.js";
+/* empty css               */
+/* empty css               */
+/* empty css               */
+/* empty css               */
+/* empty css               */
+import "./CustomTable-BUkwlbzN.js";
+import "./index-D56hUMeD.js";
+import { L as de } from "./Logo-D7fyXyB-.js";
+import { _ as T } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const we = {
+  class: "SidebarCom"
+}, $e = {
+  class: "LogoContent"
+}, Ce = {
+  class: "MenuContent"
+}, Me = {
+  class: "sidebar-footer"
+}, Se = /* @__PURE__ */ P({
+  __name: "AppSidebar",
+  props: {
+    menuType: {
+      default: "system"
+    },
+    showUserPanel: {
+      type: Boolean,
+      default: !0
+    }
+  },
+  setup(m) {
+    const e = m, {
+      appsData: c
+    } = D(), {
+      clearAuth: _
+    } = F(), {
+      clearUserProfile: v
+    } = J(), {
+      menus: g
+    } = Q(e.menuType), f = te();
+    function k() {
+      f.push({
+        path: "/"
+      });
+    }
+    function w() {
+      v(), _(), k();
+    }
+    const h = ne(), C = U([""]);
+    function A($) {
+      const l = $.path;
+      G(() => {
+        f.push({
+          path: l,
+          query: h.query
+        }), C.value = [l], window.scrollTo({
+          top: 0,
+          behavior: "smooth"
+        });
+      });
+    }
+    return V(() => [h.path, g.value], () => {
+      const $ = X(g.value, h.path, {
+        // Sidebar 中，子路由应该选中子菜单项
+        returnParentOnChildMatch: !1,
+        // 后备查找函数
+        fallback: (l) => Y(h.matched, e.menuType, l)
+      });
+      $ && (C.value = [$]);
+    }, {
+      immediate: !0,
+      deep: !0
+    }), ($, l) => (t(), n("div", we, [s("div", $e, [o(u(de), {
+      icon: u(c).applicationLogoUrl,
+      name: u(c).name,
+      onTo: k
+    }, null, 8, ["icon", "name"])]), s("div", Ce, [o(be, {
+      "selected-keys": C.value,
+      "onUpdate:selectedKeys": l[0] || (l[0] = (d) => C.value = d),
+      menus: u(g),
+      onChange: A
+    }, null, 8, ["selected-keys", "menus"])]), s("div", Me, [o(u(ke), null, {
+      avatar: x(() => [o(u(oe), {
+        position: "tr",
+        "dropdown-offset-y": "30px"
+      }, {
+        items: x(() => [o(u(se)), o(u(ae)), o(u(re)), o(u(ie)), o(u(ue)), o(u(le)), o(u(K), {
+          icon: "lucide:home",
+          onClick: k
+        }, {
+          default: x(() => [...l[1] || (l[1] = [H("主页", -1)])]),
+          _: 1
+        }), o(u(K), {
+          icon: "lucide:log-out",
+          danger: "",
+          onClick: w
+        }, {
+          default: x(() => [...l[2] || (l[2] = [H("退出登陆", -1)])]),
+          _: 1
+        })]),
+        _: 1
+      })]),
+      _: 1
+    }), o(u(ce))])]));
+  }
+}), Ie = /* @__PURE__ */ T(Se, [["__scopeId", "data-v-f465af61"]]), Te = {
+  class: "layout"
+}, Ae = {
+  class: "leftContent"
+}, Pe = {
+  class: "content"
+}, xe = {
+  class: "contentCenter"
+}, Ue = {
+  class: "pages"
+}, Le = {
+  key: 0,
+  class: "loading"
+}, Be = /* @__PURE__ */ P({
+  __name: "AppLayout",
+  props: {
+    menuType: {
+      default: "system"
+    },
+    showUserPanel: {
+      type: Boolean,
+      default: !0
+    }
+  },
+  setup(m) {
+    const e = m, {
+      isChecking: c
+    } = Z();
+    return ee(), (_, v) => (t(), n("div", Te, [s("div", Ae, [o(Ie, {
+      "menu-type": e.menuType,
+      "show-user-panel": e.showUserPanel
+    }, null, 8, ["menu-type", "show-user-panel"])]), s("div", Pe, [s("div", xe, [s("div", Ue, [u(c) ? (t(), n("div", Le, [o(u(q), {
+      size: 40
+    })])) : N(_.$slots, "default", {
+      key: 1
+    }, void 0, !0)])])])]));
+  }
+}), Xt = /* @__PURE__ */ T(Be, [["__scopeId", "data-v-0eed4f11"]]), He = {
+  class: "ContentHead"
+}, ze = {
+  class: "title"
+}, Ee = {
+  key: 0,
+  class: "description"
+}, De = /* @__PURE__ */ P({
+  __name: "ContentHead",
+  props: {
+    title: {
+      type: String,
+      required: !0,
+      default: () => ""
+    },
+    description: {
+      type: String,
+      required: !0,
+      default: () => ""
+    }
+  },
+  setup(m) {
+    const e = m;
+    return (c, _) => (t(), n("div", He, [s("h1", ze, I(e.title), 1), e.description ? (t(), n("p", Ee, I(e.description), 1)) : M("", !0)]));
+  }
+}), Yt = /* @__PURE__ */ T(De, [["__scopeId", "data-v-209a7bef"]]), Ke = {
+  key: 0,
+  class: "desktop-menus"
+}, Oe = {
+  key: 0,
+  class: "header-menu-item"
+}, Re = {
+  class: "submenu-popup"
+}, We = {
+  class: "submenu-content"
+}, Ge = ["onClick"], Ve = {
+  key: 0,
+  class: "submenu-item-icon"
+}, Ne = {
+  class: "submenu-item-content"
+}, je = {
+  class: "submenu-item-title"
+}, qe = {
+  key: 0,
+  class: "submenu-item-description"
+}, Fe = ["onClick"], Je = {
+  key: 3,
+  class: "mobile-menu"
+}, Qe = {
+  class: "mobile-menu-content"
+}, Xe = ["onClick"], Ye = {
+  key: 0,
+  class: "mobile-submenu"
+}, Ze = ["onClick"], et = ["onClick"], tt = /* @__PURE__ */ P({
+  __name: "HeaderMenus",
+  props: {
+    menus: {
+      type: Array,
+      required: !0
+    },
+    activateKey: {
+      type: String,
+      required: !0
+    },
+    theme: {
+      type: String,
+      default: "light"
+    }
+  },
+  emits: ["change"],
+  setup(m, {
+    emit: e
+  }) {
+    const c = m, _ = e, v = U(!1), g = U(!1), f = U({});
+    function k() {
+      g.value = window.innerWidth <= 1024;
+    }
+    function w() {
+      v.value = !v.value;
+    }
+    function h() {
+      v.value = !1;
+    }
+    function C(i) {
+      _("change", i);
+    }
+    function A(i) {
+      _("change", i), h();
+    }
+    function $(i) {
+      f.value[i] = !f.value[i];
+    }
+    function l(i) {
+      const p = c.activateKey, r = i.path;
+      if (p === r || p.startsWith(r + "/"))
+        return !0;
+      if (i.children && i.children.length > 0) {
+        for (const b of i.children)
+          if (p === b.path || p.startsWith(b.path + "/"))
+            return !0;
+      }
+      return !1;
+    }
+    function d(i) {
+      const p = c.activateKey, r = i.path;
+      return !!(p === r || p.startsWith(r + "/"));
+    }
+    function z(i) {
+      _("change", i);
+    }
+    function a() {
+      k(), g.value || h();
+    }
+    return j(() => {
+      k(), window.addEventListener("resize", a);
+    }), he(() => {
+      window.removeEventListener("resize", a);
+    }), (i, p) => (t(), n("div", {
+      class: S(["HeaderMenus", {
+        "HeaderMenus--dark": c.theme === "dark"
+      }])
+    }, [g.value ? M("", !0) : (t(), n("div", Ke, [(t(!0), n(L, null, E(c.menus, (r, b) => (t(), n(L, {
+      key: b
+    }, [r.children && r.children.length > 0 ? (t(), n("div", Oe, [s("div", {
+      class: S(["headerLink hasChildren", {
+        activate: l(r)
+      }])
+    }, [H(I(r.name) + " ", 1), o(u(R), {
+      icon: "mingcute:down-line",
+      class: "dropdown-arrow"
+    })], 2), s("div", Re, [s("div", We, [(t(!0), n(L, null, E(r.children, (y, O) => (t(), n("div", {
+      key: O,
+      class: S(["submenu-item", {
+        active: d(y)
+      }]),
+      onClick: (me) => C(y)
+    }, [y.icon ? (t(), n("div", Ve, [o(u(R), {
+      icon: y.icon
+    }, null, 8, ["icon"])])) : M("", !0), s("div", Ne, [s("div", je, I(y.name), 1), y.description ? (t(), n("div", qe, I(y.description), 1)) : M("", !0)])], 10, Ge))), 128))])])])) : (t(), n("div", {
+      key: 1,
+      class: S(["headerLink", {
+        activate: l(r)
+      }]),
+      onClick: (y) => z(r)
+    }, I(r.name), 11, Fe))], 64))), 128))])), g.value ? (t(), n("button", {
+      key: 1,
+      class: S(["mobile-menu-toggle", {
+        active: v.value
+      }]),
+      "aria-label": "切换菜单",
+      onClick: w
+    }, [...p[0] || (p[0] = [s("span", {
+      class: "hamburger-line"
+    }, null, -1), s("span", {
+      class: "hamburger-line"
+    }, null, -1), s("span", {
+      class: "hamburger-line"
+    }, null, -1)])], 2)) : M("", !0), v.value ? (t(), n("div", {
+      key: 2,
+      class: "mobile-menu-overlay",
+      onClick: h
+    })) : M("", !0), v.value ? (t(), n("div", Je, [s("div", Qe, [(t(!0), n(L, null, E(c.menus, (r, b) => (t(), n(L, {
+      key: b
+    }, [r.children && r.children.length > 0 ? (t(), n("div", {
+      key: 0,
+      class: S(["mobile-menu-item has-children", {
+        activate: l(r),
+        expanded: f.value[b]
+      }])
+    }, [s("div", {
+      class: "mobile-menu-item-header",
+      onClick: (y) => $(b)
+    }, [s("span", null, I(r.name), 1), o(u(R), {
+      icon: f.value[b] ? "mingcute:up-line" : "mingcute:down-line",
+      class: "mobile-submenu-arrow"
+    }, null, 8, ["icon"])], 8, Xe), f.value[b] ? (t(), n("div", Ye, [(t(!0), n(L, null, E(r.children, (y, O) => (t(), n("div", {
+      key: O,
+      class: S(["mobile-submenu-item", {
+        active: d(y)
+      }]),
+      onClick: (me) => A(y)
+    }, I(y.name), 11, Ze))), 128))])) : M("", !0)], 2)) : (t(), n("div", {
+      key: 1,
+      class: S(["mobile-menu-item", {
+        activate: l(r)
+      }]),
+      onClick: (y) => A(r)
+    }, I(r.name), 11, et))], 64))), 128))])])) : M("", !0)], 2));
+  }
+}), nt = /* @__PURE__ */ T(tt, [["__scopeId", "data-v-42f528ac"]]), ot = {
+  class: "HeaderCom"
+}, st = {
+  class: "HeaderCom-inner"
+}, at = {
+  class: "left"
+}, rt = {
+  class: "right"
+}, it = ["aria-label"], ut = {
+  key: 0,
+  class: "theme-icon",
+  "aria-hidden": "true"
+}, lt = {
+  key: 1,
+  class: "theme-icon",
+  "aria-hidden": "true"
+}, ct = /* @__PURE__ */ P({
+  __name: "Header",
+  props: {
+    menuType: {
+      default: "header"
+    },
+    showUserPanel: {
+      type: Boolean,
+      default: !0
+    },
+    showThemeToggle: {
+      type: Boolean,
+      default: !0
+    },
+    theme: {
+      default: "light"
+    }
+  },
+  setup(m) {
+    const e = m, {
+      appsData: c
+    } = D(), {
+      clearAuth: _
+    } = F(), {
+      clearUserProfile: v
+    } = J(), {
+      menus: g
+    } = Q(e.menuType), f = U(""), k = te(), w = ne();
+    function h() {
+      G(() => {
+        k.push({
+          path: "/"
+        }), window.scrollTo({
+          top: 0,
+          behavior: "smooth"
+        });
+      });
+    }
+    function C() {
+      v(), _(), h();
+    }
+    function A(l) {
+      const d = l.path;
+      G(() => {
+        k.push(d), f.value = d, window.scrollTo({
+          top: 0,
+          behavior: "smooth"
+        });
+      });
+    }
+    function $() {
+      _e(e.theme === "dark" ? "light" : "dark");
+    }
+    return V(() => [w.path, g.value], () => {
+      f.value = X(g.value, w.path, {
+        // Header 中，子菜单匹配时返回父菜单路径
+        returnParentOnChildMatch: !0,
+        // 后备查找函数
+        fallback: (l) => Y(w.matched, e.menuType, l)
+      });
+    }, {
+      immediate: !0,
+      deep: !0
+    }), (l, d) => (t(), n("header", ot, [s("div", st, [s("div", at, [o(de, {
+      icon: u(c).applicationLogoUrl,
+      name: u(c).name,
+      onTo: h
+    }, null, 8, ["icon", "name"])]), s("div", rt, [o(nt, {
+      menus: u(g),
+      activateKey: f.value,
+      theme: e.theme,
+      onChange: A
+    }, null, 8, ["menus", "activateKey", "theme"]), e.showThemeToggle ? (t(), n("button", {
+      key: 0,
+      type: "button",
+      class: "theme-toggle",
+      "aria-label": e.theme === "dark" ? "切换为浅色" : "切换为深色",
+      onClick: $
+    }, [e.theme === "dark" ? (t(), n("span", ut, [...d[0] || (d[0] = [s("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "20",
+      height: "20",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-width": "2",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round"
+    }, [s("circle", {
+      cx: "12",
+      cy: "12",
+      r: "4"
+    }), s("path", {
+      d: "M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"
+    })], -1)])])) : (t(), n("span", lt, [...d[1] || (d[1] = [s("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "20",
+      height: "20",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-width": "2",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round"
+    }, [s("path", {
+      d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"
+    })], -1)])]))], 8, it)) : M("", !0), e.showUserPanel ? (t(), pe(oe, {
+      key: 1
+    }, {
+      items: x(() => [o(se), o(ae), o(re), o(ie), o(ue), o(le), o(K, {
+        icon: "lucide:home",
+        onClick: h
+      }, {
+        default: x(() => [...d[2] || (d[2] = [H("主页", -1)])]),
+        _: 1
+      }), o(K, {
+        icon: "lucide:log-out",
+        danger: "",
+        onClick: C
+      }, {
+        default: x(() => [...d[3] || (d[3] = [H("退出登陆", -1)])]),
+        _: 1
+      })]),
+      _: 1
+    })) : M("", !0), o(ce)])])]));
+  }
+}), dt = /* @__PURE__ */ T(ct, [["__scopeId", "data-v-ce7108a0"]]), mt = {
+  class: "layout-inner"
+}, ht = {
+  key: 0,
+  class: "loading"
+}, pt = "none", ft = "var(--huyooo-layout-dark-background)", _t = /* @__PURE__ */ P({
+  __name: "DefaultLayout",
+  props: {
+    menuType: {
+      default: "header"
+    },
+    showUserPanel: {
+      type: Boolean,
+      default: !0
+    },
+    showThemeToggle: {
+      type: Boolean,
+      default: !0
+    },
+    enableRoutePermission: {
+      type: Boolean,
+      default: !0
+    },
+    backgroundImage: {
+      default: ""
+    },
+    theme: {
+      default: void 0
+    }
+  },
+  setup(m) {
+    var d, z;
+    const e = m, {
+      appsData: c
+    } = D(), {
+      appsAuthPageInfoApi: _,
+      appsAuthPageInfoLoading: v,
+      appsAuthPageInfoSuccess: g
+    } = D(), f = U(typeof window < "u" && ((z = (d = window.matchMedia) == null ? void 0 : d.call(window, "(prefers-color-scheme: dark)")) == null ? void 0 : z.matches));
+    function k() {
+      var a, i;
+      typeof window > "u" || (f.value = ((i = (a = window.matchMedia) == null ? void 0 : a.call(window, "(prefers-color-scheme: dark)")) == null ? void 0 : i.matches) ?? !1);
+    }
+    let w;
+    j(() => {
+      var i, p;
+      !g.value && !v.value && _(), k();
+      const a = (i = window.matchMedia) == null ? void 0 : i.call(window, "(prefers-color-scheme: dark)");
+      (p = a == null ? void 0 : a.addEventListener) == null || p.call(a, "change", k), w = () => {
+        var r;
+        return (r = a == null ? void 0 : a.removeEventListener) == null ? void 0 : r.call(a, "change", k);
+      };
+    });
+    const h = B(() => {
+      var r, b;
+      const a = e.theme;
+      if (a && a !== "system") return a;
+      if (a === "system") return f.value ? "dark" : "light";
+      const i = ve.value;
+      if (i === "dark" || i === "light") return i;
+      if (i === "system") return f.value ? "dark" : "light";
+      const p = (b = (r = c.value) == null ? void 0 : r.brand) == null ? void 0 : b.theme;
+      return p === "dark" || p === "light" ? p : "light";
+    }), C = B(() => e.backgroundImage ? e.backgroundImage : h.value === "dark" ? ft : pt), A = B(() => {
+      const a = C.value;
+      return !a || a === "none" ? {
+        backgroundImage: "none",
+        backgroundColor: "transparent"
+      } : {
+        backgroundImage: a,
+        backgroundAttachment: "fixed"
+      };
+    });
+    V(h, (a) => {
+      typeof document > "u" || (a === "dark" ? (document.body.setAttribute("arco-theme", "dark"), document.body.classList.add("dark")) : (document.body.removeAttribute("arco-theme"), document.body.classList.remove("dark")));
+    }, {
+      immediate: !0
+    }), fe(() => {
+      w == null || w();
+    });
+    const {
+      setGlobalSEO: $
+    } = ye();
+    $(ge);
+    const l = e.enableRoutePermission ? Z().isChecking : U(!1);
+    return ee(), (a, i) => (t(), n("div", {
+      class: S(["layout", {
+        "layout--dark": h.value === "dark"
+      }]),
+      style: W(A.value)
+    }, [o(dt, {
+      "menu-type": e.menuType,
+      "show-user-panel": e.showUserPanel,
+      "show-theme-toggle": e.showThemeToggle,
+      theme: h.value
+    }, null, 8, ["menu-type", "show-user-panel", "show-theme-toggle", "theme"]), s("main", mt, [u(l) ? (t(), n("div", ht, [o(u(q), {
+      size: 40
+    })])) : N(a.$slots, "default", {
+      key: 1
+    }, void 0, !0)])], 6));
+  }
+}), Zt = /* @__PURE__ */ T(_t, [["__scopeId", "data-v-52a72efd"]]), vt = /* @__PURE__ */ P({
+  __name: "Gradientbackground",
+  props: {
+    width: {
+      type: String,
+      default: "100%"
+    },
+    height: {
+      type: String,
+      default: "100%"
+    },
+    zIndex: {
+      type: String,
+      default: "-1"
+    },
+    top: {
+      type: String,
+      default: "10%"
+    },
+    left: {
+      type: String,
+      default: "0%"
+    },
+    right: {
+      type: String,
+      default: "auto"
+    },
+    blur: {
+      type: String,
+      default: "0px"
+    },
+    background: {
+      type: String,
+      required: !1,
+      default: () => "var(--huyooo-gradient-background)"
+    }
+  },
+  setup(m) {
+    const e = m, c = B(() => ({
+      pointerEvents: "none",
+      position: "absolute",
+      zIndex: e.zIndex,
+      width: e.width,
+      height: e.height,
+      filter: `blur(${e.blur})`
+    })), _ = B(() => ({
+      width: "100%",
+      height: "100%",
+      background: e.background
+    }));
+    return (v, g) => (t(), n("div", {
+      class: "ellipsis",
+      style: W(c.value)
+    }, [s("div", {
+      class: "ellipsis-item",
+      style: W(_.value)
+    }, null, 4)], 4));
+  }
+}), en = /* @__PURE__ */ T(vt, [["__scopeId", "data-v-64c41f65"]]), gt = {
+  class: "SvgIcon"
+}, yt = ["href", "fill"], kt = /* @__PURE__ */ P({
+  __name: "SvgIcon",
+  props: {
+    prefix: {
+      type: String,
+      required: !1,
+      default: "icon"
+    },
+    name: {
+      type: String,
+      required: !0
+    },
+    color: {
+      type: String,
+      required: !1,
+      default: "currentColor"
+    }
+  },
+  setup(m) {
+    const e = m, c = B(() => `#${e.prefix ?? "icon"}-${e.name}`);
+    return (_, v) => (t(), n("svg", gt, [s("use", {
+      href: c.value,
+      fill: e.color
+    }, null, 8, yt)]));
+  }
+}), tn = /* @__PURE__ */ T(kt, [["__scopeId", "data-v-9d0b08a0"]]), bt = {}, wt = {
+  class: "WidthContainer"
+};
+function $t(m, e) {
+  return t(), n("div", wt, [N(m.$slots, "default", {}, void 0, !0)]);
+}
+const nn = /* @__PURE__ */ T(bt, [["render", $t], ["__scopeId", "data-v-d06aac1f"]]);
+export {
+  Xt as A,
+  Yt as C,
+  Zt as D,
+  en as G,
+  dt as H,
+  tn as S,
+  nn as W,
+  Ie as a,
+  nt as b
+};