@huyooo/ui 0.10.4 → 0.10.7

package/dist/WidthContainer-TXsvW1ut.js

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