aibox-custom-component-packages 0.0.6 → 0.0.7

package/es/CustomSidebar.mjs

@@ -0,0 +1,712 @@
+import { w as $ } from "./chunks/index.bCzIhWFw.js";
+import { createElementBlock as p, openBlock as s, createVNode as y, createElementVNode as d, createBlock as g, createCommentVNode as I, unref as u, withCtx as m, normalizeStyle as k, toDisplayString as x, resolveDynamicComponent as T, ref as A, watch as B, nextTick as D, normalizeClass as w, withModifiers as K, computed as W, Fragment as C, renderList as H, Transition as V, withDirectives as Y, vShow as G } from "vue";
+import { ElIcon as O, ElAutoResizer as q, ElTreeV2 as J } from "element-plus";
+import { AiboxIcon as Q } from "color-message-aibox-vue";
+import { _ as N } from "./chunks/_plugin-vue_export-helper.CHgC5LLL.js";
+import { IconRenderer as X, iconLibraryMap as Z } from "color-star-custom-components";
+import './assets/CustomSidebar.css';const _ = { class: "nav-title overflow-hidden" }, ee = /* @__PURE__ */ Object.assign({
+  name: "NavTitle"
+}, {
+  __name: "NavTitle",
+  props: {
+    // 标题文本
+    title: {
+      type: String,
+      default: ""
+    },
+    // 头部图标尺寸
+    logoSize: {
+      type: Number,
+      default: 30
+    },
+    // 标题样式
+    titleStyle: {
+      type: Object,
+      default: () => ({ fontSize: "16px" })
+    },
+    // 是否显示折叠按钮
+    showToggle: {
+      type: Boolean,
+      default: !0
+    },
+    // 折叠按钮图标
+    toggleIcon: {
+      type: [Object, String],
+      default: null
+    }
+  },
+  emits: ["toggle"],
+  setup(e, { emit: n }) {
+    const t = n, o = () => {
+      t("toggle");
+    };
+    return (l, h) => (s(), p("div", _, [
+      y(u(O), { size: e.logoSize }, {
+        default: m(() => [
+          y(u(Q))
+        ]),
+        _: 1
+      }, 8, ["size"]),
+      d("span", {
+        class: "weight-500 text-1f2329 title-text",
+        style: k(e.titleStyle)
+      }, x(e.title), 5),
+      e.showToggle ? (s(), g(u(O), {
+        key: 0,
+        size: 18,
+        class: "collapse-unfold-icon",
+        onClick: o
+      }, {
+        default: m(() => [
+          (s(), g(T(e.toggleIcon)))
+        ]),
+        _: 1
+      })) : I("", !0)
+    ]));
+  }
+}), te = /* @__PURE__ */ N(ee, [["__scopeId", "data-v-384d20d1"]]), M = {
+  DIR: "DIR",
+  // 目录
+  MENU: "MENU",
+  // 菜单
+  BUTTON: "BUTTON"
+  // 按钮
+}, ne = /* @__PURE__ */ new Map([
+  ["active", "#3271FE"],
+  ["parent_active", "#3271FE"],
+  ["normal", "#1F2329"]
+]), oe = (e, n) => !Array.isArray(e) || !n ? !1 : e.some((t) => t.path === n ? !0 : t.children?.length > 0 ? oe(t.children, n) : !1), le = (e, n = 1) => e.filter((o) => [M.DIR, M.MENU].includes(o.type)).map((o) => ({
+  ...o,
+  id: o.bnid,
+  name: o.name,
+  path: o?.path || "",
+  children: o.children?.length > 0 ? le(o.children || [], n + 1) : [],
+  level: n
+})), ie = (e, n) => e?.children?.length ? e.children.some(
+  (t) => t?.path === n || t.children?.length && ie(t, n)
+) : !1, z = (e, n) => e?.children?.length ? e.children.some(
+  (t) => t?.id === n || t.children?.length && z(t, n)
+) : !1, re = (e, n) => {
+  const t = e?.id === n, o = z(e, n);
+  let l = "normal";
+  return t ? l = "active" : o && (l = "parent_active"), ne.get(l);
+}, $e = (e, n) => e.includes(n) ? e : [...e, n], Be = (e, n) => e.filter((t) => t !== n), se = (e, n, t = []) => e.some((o) => {
+  if (o?.path === n)
+    return !0;
+  if (o.children?.length > 0) {
+    t.push(o.id);
+    const l = se(o.children, n, t);
+    return l || t.pop(), l;
+  }
+  return !1;
+}), U = (e, n, t = []) => e.some((o) => {
+  if (o?.id === n)
+    return !0;
+  if (o.children?.length > 0) {
+    t.push(o.id);
+    const l = U(o.children, n, t);
+    return l || t.pop(), l;
+  }
+  return !1;
+}), De = (e, n) => {
+  const t = [];
+  return U(e, n, t), t;
+}, ae = (e, n) => {
+  if (!Array.isArray(e) || !n) return null;
+  for (const t of e) {
+    if (t.path === n)
+      return t;
+    if (t.children?.length > 0) {
+      const o = ae(t.children, n);
+      if (o) return o;
+    }
+  }
+  return null;
+}, ce = (e) => Array.isArray(e) ? e.map((n) => {
+  const t = { ...n };
+  return t.children && Array.isArray(t.children) && t.children.length > 0 ? t.children = ce(t.children) : t.isLeaf = !0, t;
+}) : [], ue = (e) => {
+  if (!Array.isArray(e) || e.length === 0) return null;
+  for (const n of e) {
+    if (n.isLeaf && n.path)
+      return n;
+    if (n.children?.length > 0) {
+      const t = ue(n.children);
+      if (t) return t;
+    }
+  }
+  return null;
+}, Ke = ["/404", "/login", "/unauthorized"], j = {
+  label: "name",
+  children: "children",
+  isLeaf: "isLeaf"
+}, P = {
+  PARENT: "parent",
+  LEAF: "leaf"
+}, We = {
+  LOADING: "loading",
+  LOADED: "loaded",
+  ERROR: "error"
+}, v = {
+  POPUP: "popup",
+  FOOTER: "footer"
+}, de = { class: "node-label" }, fe = ["onClick"], pe = /* @__PURE__ */ Object.assign({
+  name: "MenuList"
+}, {
+  __name: "MenuList",
+  props: {
+    // 菜单数据（已处理好的树形结构）
+    menuData: {
+      type: Array,
+      default: () => []
+    },
+    // 当前选中的菜单ID
+    currentMenuId: {
+      type: String,
+      default: null
+    },
+    // 展开的节点ID数组
+    expandedKeys: {
+      type: Array,
+      default: () => []
+    },
+    // 树形组件配置
+    treeProps: {
+      type: Object,
+      default: () => j
+    },
+    // 菜单项高度
+    itemHeight: {
+      type: Number,
+      default: 36
+    },
+    // 缩进距离
+    indent: {
+      type: Number,
+      default: 24
+    },
+    // 图标大小
+    iconSize: {
+      type: Number,
+      default: 16
+    },
+    // 菜单选中背景色
+    selectMenuBg: {
+      type: String,
+      default: "#eaf0fe"
+    },
+    // 展开图标组件
+    expandedIcon: {
+      type: [Object, String],
+      default: null
+    },
+    // 收起图标组件
+    collapsedIcon: {
+      type: [Object, String],
+      default: null
+    }
+    // 图标渲染器组件（可选）
+    // iconRenderer: {
+    //   type: [Object, String],
+    //   default: null,
+    // },
+    // // 图标库配置
+    // iconLibrary: {
+    //   type: [String, Object],
+    //   default: null,
+    // },
+  },
+  emits: ["node-click", "node-expand", "node-collapse"],
+  setup(e, { emit: n }) {
+    const t = e, o = n, l = A(null), h = (r) => r?.icon && r.level === 1 || !r.isLeaf, c = (r) => re(r, t.currentMenuId), b = (r) => {
+      const E = r.isLeaf ? P.LEAF : P.PARENT;
+      o("node-click", r, E);
+    }, a = (r) => {
+      o("node-expand", r.id, r);
+    }, i = (r) => {
+      o("node-collapse", r.id, r);
+    }, S = (r) => {
+      if (!l.value) return;
+      t.expandedKeys.includes(r.data.id) ? l.value.collapseNode(r) : l.value.expandNode(r);
+    };
+    return B(
+      () => t.expandedKeys,
+      (r) => {
+        D(() => {
+          l.value && l.value.setExpandedKeys([...r]);
+        });
+      },
+      { deep: !0 }
+    ), (r, E) => (s(), g(u(q), { class: "flex-1 overflow-hidden" }, {
+      default: m(({ height: F }) => [
+        y(u(J), {
+          ref_key: "treeRef",
+          ref: l,
+          "node-key": "id",
+          data: e.menuData,
+          props: e.treeProps,
+          height: F,
+          "current-node-key": e.currentMenuId,
+          "highlight-current": !0,
+          "expanded-keys": e.expandedKeys,
+          "show-checkbox": !1,
+          "item-size": e.itemHeight + 8,
+          "expand-on-click-node": !1,
+          indent: e.indent,
+          style: k({ "--select-menu-bg": e.selectMenuBg }),
+          onNodeClick: b,
+          onNodeExpand: a,
+          onNodeCollapse: i,
+          class: "custom-tree"
+        }, {
+          default: m(({ node: L, data: f }) => [
+            d("div", {
+              class: w(["tree-node-content-custom", {
+                "has-children": !f.isLeaf,
+                "is-current": f.id === e.currentMenuId && f.isLeaf,
+                "is-parent-active": u(z)(f, e.currentMenuId) && !f.isLeaf
+              }])
+            }, [
+              h(f) ? (s(), g(u(O), {
+                key: 0,
+                size: e.iconSize,
+                class: "node-icon",
+                color: c(f)
+              }, {
+                default: m(() => [
+                  y(u(X), {
+                    "icon-name": f?.icon,
+                    "icon-library": u(Z).aibox
+                  }, null, 8, ["icon-name", "icon-library"])
+                ]),
+                _: 2
+              }, 1032, ["size", "color"])) : I("", !0),
+              d("span", de, x(L.label), 1),
+              f.isLeaf ? I("", !0) : (s(), p("div", {
+                key: 1,
+                class: "expand-arrow",
+                onClick: K((Le) => S(L), ["stop"])
+              }, [
+                y(u(O), {
+                  size: e.iconSize,
+                  color: c(f)
+                }, {
+                  default: m(() => [
+                    (s(), g(T(e.expandedKeys.includes(f.id) ? e.expandedIcon : e.collapsedIcon)))
+                  ]),
+                  _: 2
+                }, 1032, ["size", "color"])
+              ], 8, fe))
+            ], 2)
+          ]),
+          _: 1
+        }, 8, ["data", "props", "height", "current-node-key", "expanded-keys", "item-size", "indent", "style"])
+      ]),
+      _: 1
+    }));
+  }
+}), ye = /* @__PURE__ */ N(pe, [["__scopeId", "data-v-c047074f"]]), he = { class: "user-info-card__avatar" }, me = { class: "user-info-card__avatar-text" }, ge = { class: "user-info-card__details" }, ve = { class: "user-info-card__name" }, Ie = {
+  key: 0,
+  class: "user-info-card__bnid"
+}, be = /* @__PURE__ */ Object.assign({
+  name: "UserInfoCard"
+}, {
+  __name: "UserInfoCard",
+  props: {
+    // 用户信息对象
+    userInfo: {
+      type: Object,
+      default: () => ({})
+    },
+    // 展示类型：USER_INFO_CARD_TYPES.POPUP | USER_INFO_CARD_TYPES.FOOTER
+    type: {
+      type: String,
+      default: v.POPUP,
+      validator: (e) => Object.values(v).includes(e)
+    }
+  },
+  setup(e) {
+    const n = e, t = W(() => n.userInfo?.name?.charAt(0)?.toUpperCase() || "");
+    return (o, l) => (s(), p("div", {
+      class: w(["user-info-card", `user-info-card--${e.type}`])
+    }, [
+      d("div", he, [
+        d("span", me, x(t.value), 1)
+      ]),
+      d("div", ge, [
+        d("div", ve, x(e.userInfo?.name || ""), 1),
+        e.type === u(v).POPUP ? (s(), p("div", Ie, x(e.userInfo?.bnid || e.userInfo?.id || ""), 1)) : I("", !0)
+      ])
+    ], 2));
+  }
+}), R = /* @__PURE__ */ N(be, [["__scopeId", "data-v-2ddc6d4a"]]), xe = { class: "user-popup-content" }, Ne = ["onClick"], Se = /* @__PURE__ */ Object.assign({
+  name: "UserPopup"
+}, {
+  __name: "UserPopup",
+  props: {
+    // 操作列表配置
+    actions: {
+      type: Array,
+      default: () => [],
+      validator: (e) => e.every((n) => n.key && (n.icon || n.iconName))
+    },
+    // 用户信息
+    userInfo: {
+      type: Object,
+      default: () => ({})
+    },
+    // 是否显示用户信息卡片
+    showUserInfo: {
+      type: Boolean,
+      default: !0
+    }
+  },
+  emits: ["action-click"],
+  setup(e, { emit: n }) {
+    const t = n, o = (l) => {
+      t("action-click", l.key, l);
+    };
+    return (l, h) => (s(), p("div", xe, [
+      e.showUserInfo ? (s(), g(R, {
+        key: 0,
+        userInfo: e.userInfo,
+        type: u(v).POPUP,
+        class: "user-info-card"
+      }, null, 8, ["userInfo", "type"])) : I("", !0),
+      d("div", {
+        class: w({
+          "popup-list": e.showUserInfo
+        })
+      }, [
+        (s(!0), p(C, null, H(e.actions, (c, b) => (s(), p(C, { key: b }, [
+          c.hidden ? I("", !0) : (s(), p("div", {
+            key: 0,
+            class: "list__item",
+            onClick: (a) => o(c)
+          }, [
+            y(u(O), {
+              class: "list__item-icon",
+              size: c.iconSize || 20,
+              color: "#262626"
+            }, {
+              default: m(() => [
+                (s(), g(T(c.icon), {
+                  size: c.iconSize || 20
+                }, null, 8, ["size"]))
+              ]),
+              _: 2
+            }, 1032, ["size"]),
+            d("span", null, x(c.label), 1)
+          ], 8, Ne))
+        ], 64))), 128))
+      ], 2)
+    ]));
+  }
+}), Oe = /* @__PURE__ */ N(Se, [["__scopeId", "data-v-be7ee388"]]), ke = { class: "navbar-box__footer__left" }, Ee = /* @__PURE__ */ Object.assign({
+  name: "NavFooter"
+}, {
+  __name: "NavFooter",
+  props: {
+    // 用户信息
+    userInfo: {
+      type: Object,
+      default: null,
+      validator: (e) => e ? e.name !== void 0 : !0
+    },
+    // 用户操作列表
+    actions: {
+      type: Array,
+      default: () => []
+    },
+    // 弹窗显示延迟（毫秒）
+    popupDelay: {
+      type: Number,
+      default: 200
+    },
+    // 弹窗左侧位置（像素）
+    popupLeft: {
+      type: Number,
+      default: 240
+    },
+    navFooterWidth: {
+      type: Number,
+      default: 240
+    },
+    // 底栏用户信息卡片展示类型
+    userInfoCardType: {
+      type: String,
+      default: v.FOOTER,
+      validator: (e) => Object.values(v).includes(e)
+    },
+    // 是否在弹窗中显示用户信息卡片
+    showPopupUserInfo: {
+      type: Boolean,
+      default: !0
+    }
+  },
+  emits: ["action-click"],
+  setup(e, { emit: n }) {
+    const t = e, o = n, l = A(null), h = A(!1), c = (a) => {
+      a || (l.value = setTimeout(() => {
+        h.value = !1;
+      }, t.popupDelay)), a && (h.value = a, clearTimeout(l.value));
+    }, b = (a, i) => {
+      h.value = !1, o("action-click", a, i);
+    };
+    return (a, i) => (s(), p(C, null, [
+      e.userInfo ? (s(), p("div", {
+        key: 0,
+        class: "navbar-box__footer flex items-center",
+        style: k({ width: e.navFooterWidth + "px" }),
+        onMouseenter: i[0] || (i[0] = (S) => c(!0)),
+        onMouseleave: i[1] || (i[1] = (S) => c(!1))
+      }, [
+        d("div", ke, [
+          y(R, {
+            userInfo: e.userInfo,
+            type: e.userInfoCardType
+          }, null, 8, ["userInfo", "type"])
+        ])
+      ], 36)) : I("", !0),
+      y(V, { name: "fade" }, {
+        default: m(() => [
+          Y(d("div", {
+            class: "footer-popup content-bg",
+            style: k({ left: e.popupLeft + "px" }),
+            onMouseenter: i[2] || (i[2] = (S) => c(!0)),
+            onMouseleave: i[3] || (i[3] = (S) => c(!1))
+          }, [
+            y(Oe, {
+              actions: e.actions,
+              userInfo: e.userInfo,
+              showUserInfo: e.showPopupUserInfo,
+              onActionClick: b
+            }, null, 8, ["actions", "userInfo", "showUserInfo"])
+          ], 36), [
+            [G, h.value]
+          ])
+        ]),
+        _: 1
+      })
+    ], 64));
+  }
+}), Ae = /* @__PURE__ */ N(Ee, [["__scopeId", "data-v-2b4a0a2b"]]), Ce = { class: "sidebar flex h-full flex-col" }, Te = { class: "flex-1 overflow-hidden flex flex-col pd-l-12 pd-r-12" }, we = /* @__PURE__ */ Object.assign({
+  name: "CustomSidebar"
+}, {
+  __name: "layout",
+  props: {
+    // ========== 菜单数据 ==========
+    // 菜单树数据（已处理好的树形结构）
+    menuData: {
+      type: Array,
+      default: () => []
+    },
+    // 当前选中的菜单ID
+    currentMenuId: {
+      type: String,
+      default: null
+    },
+    // 展开的节点ID数组
+    expandedKeys: {
+      type: Array,
+      default: () => []
+    },
+    // ========== 头部配置 ==========
+    // 标题文本
+    title: {
+      type: String,
+      default: ""
+    },
+    // 是否显示折叠按钮
+    showToggle: {
+      type: Boolean,
+      default: !0
+    },
+    // 折叠按钮图标
+    toggleIcon: {
+      type: [Object, String],
+      default: null
+    },
+    // ========== 菜单配置 ==========
+    // 树形组件配置
+    treeProps: {
+      type: Object,
+      default: () => j
+    },
+    // 菜单项高度
+    itemHeight: {
+      type: Number,
+      default: 36
+    },
+    // 缩进距离
+    indent: {
+      type: Number,
+      default: 24
+    },
+    // 图标大小
+    iconSize: {
+      type: Number,
+      default: 16
+    },
+    // 菜单选中背景色
+    selectMenuBg: {
+      type: String,
+      default: "#eaf0fe"
+    },
+    // 标题样式
+    titleStyle: {
+      type: Object,
+      default: () => ({ fontSize: "16px" })
+    },
+    // 展开图标组件
+    expandedIcon: {
+      type: [Object, String],
+      default: null
+    },
+    // 收起图标组件
+    collapsedIcon: {
+      type: [Object, String],
+      default: null
+    },
+    // 图标渲染器组件
+    iconRenderer: {
+      type: [Object, String],
+      default: null
+    },
+    // 图标库配置
+    iconLibrary: {
+      type: [String, Object],
+      default: null
+    },
+    // ========== 底部配置 ==========
+    // 是否显示底部
+    showFooter: {
+      type: Boolean,
+      default: !0
+    },
+    // 用户信息
+    userInfo: {
+      type: Object,
+      default: null
+    },
+    // 用户操作列表
+    userActions: {
+      type: Array,
+      default: () => []
+    },
+    // 弹窗显示延迟
+    popupDelay: {
+      type: Number,
+      default: 200
+    },
+    // 弹窗左侧位置（像素）
+    popupLeft: {
+      type: Number,
+      default: 240
+    },
+    navFooterWidth: {
+      type: Number,
+      default: 240
+    },
+    // 底栏用户信息卡片展示类型
+    userInfoCardType: {
+      type: String,
+      default: v.FOOTER,
+      validator: (e) => Object.values(v).includes(e)
+    },
+    // 是否在弹窗中显示用户信息卡片
+    showPopupUserInfo: {
+      type: Boolean,
+      default: !0
+    },
+    // Logo 尺寸
+    logoSize: {
+      type: Number,
+      default: 30
+    }
+  },
+  emits: [
+    "toggle",
+    "node-click",
+    "node-expand",
+    "node-collapse",
+    "user-action-click"
+  ],
+  setup(e, { emit: n }) {
+    const t = n, o = () => {
+      t("toggle");
+    }, l = (a, i) => {
+      t("node-click", a, i);
+    }, h = (a, i) => {
+      t("node-expand", a, i);
+    }, c = (a, i) => {
+      t("node-collapse", a, i);
+    }, b = (a, i) => {
+      t("user-action-click", a, i);
+    };
+    return (a, i) => (s(), p("div", Ce, [
+      d("div", Te, [
+        y(te, {
+          "title-style": e.titleStyle,
+          title: e.title,
+          "logo-size": e.logoSize,
+          "show-toggle": e.showToggle,
+          "toggle-icon": e.toggleIcon,
+          onToggle: o
+        }, null, 8, ["title-style", "title", "logo-size", "show-toggle", "toggle-icon"]),
+        y(ye, {
+          "menu-data": e.menuData,
+          "current-menu-id": e.currentMenuId,
+          "expanded-keys": e.expandedKeys,
+          "tree-props": e.treeProps,
+          "item-height": e.itemHeight,
+          indent: e.indent,
+          "icon-size": e.iconSize,
+          "select-menu-bg": e.selectMenuBg,
+          "expanded-icon": e.expandedIcon,
+          "collapsed-icon": e.collapsedIcon,
+          "icon-renderer": e.iconRenderer,
+          "icon-library": e.iconLibrary,
+          onNodeClick: l,
+          onNodeExpand: h,
+          onNodeCollapse: c
+        }, null, 8, ["menu-data", "current-menu-id", "expanded-keys", "tree-props", "item-height", "indent", "icon-size", "select-menu-bg", "expanded-icon", "collapsed-icon", "icon-renderer", "icon-library"])
+      ]),
+      e.showFooter ? (s(), g(Ae, {
+        key: 0,
+        "popup-left": e.popupLeft,
+        "user-info": e.userInfo,
+        actions: e.userActions,
+        "popup-delay": e.popupDelay,
+        "nav-footer-width": e.navFooterWidth,
+        "user-info-card-type": e.userInfoCardType,
+        "show-popup-user-info": e.showPopupUserInfo,
+        onActionClick: b
+      }, null, 8, ["popup-left", "user-info", "actions", "popup-delay", "nav-footer-width", "user-info-card-type", "show-popup-user-info"])) : I("", !0)
+    ]));
+  }
+}), ze = /* @__PURE__ */ N(we, [["__scopeId", "data-v-9caa952a"]]), He = $(ze);
+export {
+  He as CustomSidebar,
+  ne as MENU_COLOR_STRATEGY,
+  We as MENU_LOADING_STATES,
+  M as MENU_TYPE,
+  P as NODE_CLICK_TYPES,
+  Ke as SPECIAL_ROUTES,
+  j as TREE_PROPS,
+  v as USER_INFO_CARD_TYPES,
+  Be as collapseNodeKeys,
+  He as default,
+  $e as expandNodeKeys,
+  se as findExpandPath,
+  U as findExpandPathById,
+  ae as findMenuByPath,
+  ue as getFirstLeafMenu,
+  re as getMenuIconColorById,
+  De as getParentNodeIdsById,
+  z as isParentMenuActive,
+  ie as isParentRouteActive,
+  oe as isPathInMenu,
+  ce as processMenuTreeWithLeaf,
+  le as transformMenuData
+};

package/es/CustomTitle.mjs

@@ -0,0 +1,7 @@
+import { w as t } from "./chunks/index.bCzIhWFw.js";
+import { C as o } from "./chunks/layout.BREUWPEJ.js";
+const a = t(o);
+export {
+  a as CustomTitle,
+  a as default
+};