china-mobile-international-custom-components 0.0.26 → 0.0.28

package/es/chunks/layout.CWFXohJu.js

@@ -0,0 +1,622 @@
+import { resolveComponent as D, createElementBlock as g, openBlock as c, createCommentVNode as x, createElementVNode as y, createBlock as b, createVNode as h, withCtx as v, resolveDynamicComponent as I, normalizeStyle as C, toDisplayString as N, ref as A, watch as $, nextTick as P, unref as m, normalizeClass as F, withModifiers as U, Fragment as E, renderList as B, Transition as K, withDirectives as H, vShow as V } from "vue";
+import { _ as k } from "./_plugin-vue_export-helper.CHgC5LLL.js";
+import { ElAutoResizer as G, ElTreeV2 as Y, ElIcon as L } from "element-plus";
+import { IconRenderer as W, iconLibraryMap as q } from "color-star-custom-components";
+import '../assets/layout2.css';const J = { class: "nav-title overflow-hidden" }, Q = {
+  key: 0,
+  class: "title-logo"
+}, X = /* @__PURE__ */ Object.assign({
+  name: "NavTitle"
+}, {
+  __name: "NavTitle",
+  props: {
+    // 标题文本
+    title: {
+      type: String,
+      default: ""
+    },
+    // Logo 图标组件
+    logo: {
+      type: [Object, String],
+      default: null
+    },
+    // Logo 尺寸
+    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, l = () => {
+      t("toggle");
+    };
+    return (o, f) => {
+      const s = D("el-icon");
+      return c(), g("div", J, [
+        e.logo ? (c(), g("div", Q, [
+          h(s, { size: e.logoSize }, {
+            default: v(() => [
+              (c(), b(I(e.logo)))
+            ]),
+            _: 1
+          }, 8, ["size"])
+        ])) : x("", !0),
+        y("span", {
+          class: "weight-500 text-1f2329 title-text",
+          style: C(e.titleStyle)
+        }, N(e.title), 5),
+        e.showToggle ? (c(), b(s, {
+          key: 1,
+          size: 20,
+          class: "collapse-unfold-icon",
+          onClick: l
+        }, {
+          default: v(() => [
+            (c(), b(I(e.toggleIcon)))
+          ]),
+          _: 1
+        })) : x("", !0)
+      ]);
+    };
+  }
+}), Z = /* @__PURE__ */ k(X, [["__scopeId", "data-v-05e70761"]]), z = {
+  DIR: "DIR",
+  // 目录
+  MENU: "MENU",
+  // 菜单
+  BUTTON: "BUTTON"
+  // 按钮
+}, _ = /* @__PURE__ */ new Map([
+  ["active", "#3271FE"],
+  ["parent_active", "#3271FE"],
+  ["normal", "#666666"]
+]), ee = (e, n) => !Array.isArray(e) || !n ? !1 : e.some((t) => t.path === n ? !0 : t.children?.length > 0 ? ee(t.children, n) : !1), te = (e, n = 1) => e.filter((l) => [z.DIR, z.MENU].includes(l.type)).map((l) => ({
+  ...l,
+  id: l.bnid,
+  name: l.name,
+  path: l?.path || "",
+  children: l.children?.length > 0 ? te(l.children || [], n + 1) : [],
+  level: n
+})), ne = (e, n) => e?.children?.length ? e.children.some(
+  (t) => t?.path === n || t.children?.length && ne(t, n)
+) : !1, O = (e, n) => e?.children?.length ? e.children.some(
+  (t) => t?.id === n || t.children?.length && O(t, n)
+) : !1, le = (e, n) => {
+  const t = e?.id === n, l = O(e, n);
+  let o = "normal";
+  return t ? o = "active" : l && (o = "parent_active"), _.get(o);
+}, Te = (e, n) => e.includes(n) ? e : [...e, n], ze = (e, n) => e.filter((t) => t !== n), oe = (e, n, t = []) => e.some((l) => {
+  if (l?.path === n)
+    return !0;
+  if (l.children?.length > 0) {
+    t.push(l.id);
+    const o = oe(l.children, n, t);
+    return o || t.pop(), o;
+  }
+  return !1;
+}), j = (e, n, t = []) => e.some((l) => {
+  if (l?.id === n)
+    return !0;
+  if (l.children?.length > 0) {
+    t.push(l.id);
+    const o = j(l.children, n, t);
+    return o || t.pop(), o;
+  }
+  return !1;
+}), Me = (e, n) => {
+  const t = [];
+  return j(e, n, t), t;
+}, ie = (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 l = ie(t.children, n);
+      if (l) return l;
+    }
+  }
+  return null;
+}, re = (e) => Array.isArray(e) ? e.map((n) => {
+  const t = { ...n };
+  return t.children && Array.isArray(t.children) && t.children.length > 0 ? t.children = re(t.children) : t.isLeaf = !0, t;
+}) : [], ce = (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 = ce(n.children);
+      if (t) return t;
+    }
+  }
+  return null;
+}, Ce = ["/404", "/login", "/unauthorized"], w = {
+  label: "name",
+  children: "children",
+  isLeaf: "isLeaf"
+}, M = {
+  PARENT: "parent",
+  LEAF: "leaf"
+}, je = {
+  IDLE: "idle",
+  LOADING: "loading",
+  LOADED: "loaded",
+  ERROR: "error"
+}, se = { class: "node-label" }, ae = ["onClick"], ue = /* @__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: () => w
+    },
+    // 菜单项高度
+    itemHeight: {
+      type: Number,
+      default: 36
+    },
+    // 缩进距离
+    indent: {
+      type: Number,
+      default: 24
+    },
+    // 图标大小
+    iconSize: {
+      type: Number,
+      default: 16
+    },
+    // 展开图标组件
+    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, l = n, o = A(null), f = (i) => i?.icon && i.level === 1 || !i.isLeaf, s = (i) => le(i, t.currentMenuId), p = (i) => {
+      const S = i.isLeaf ? M.LEAF : M.PARENT;
+      l("node-click", i, S);
+    }, a = (i) => {
+      l("node-expand", i.id, i);
+    }, r = (i) => {
+      l("node-collapse", i.id, i);
+    }, u = (i) => {
+      if (!o.value) return;
+      t.expandedKeys.includes(i.data.id) ? o.value.collapseNode(i) : o.value.expandNode(i);
+    };
+    return $(
+      () => t.expandedKeys,
+      (i) => {
+        P(() => {
+          o.value && o.value.setExpandedKeys([...i]);
+        });
+      },
+      { deep: !0 }
+    ), (i, S) => (c(), b(m(G), { class: "flex-1 overflow-hidden" }, {
+      default: v(({ height: R }) => [
+        h(m(Y), {
+          ref_key: "treeRef",
+          ref: o,
+          "node-key": "id",
+          data: e.menuData,
+          props: e.treeProps,
+          height: R,
+          "current-node-key": e.currentMenuId,
+          "highlight-current": !0,
+          "expanded-keys": e.expandedKeys,
+          "show-checkbox": !1,
+          "item-size": e.itemHeight,
+          "expand-on-click-node": !1,
+          indent: e.indent,
+          onNodeClick: p,
+          onNodeExpand: a,
+          onNodeCollapse: r,
+          class: "custom-tree"
+        }, {
+          default: v(({ node: T, data: d }) => [
+            y("div", {
+              class: F(["tree-node-content-custom", {
+                "has-children": !d.isLeaf,
+                "is-current": d.id === e.currentMenuId && d.isLeaf,
+                "is-parent-active": m(O)(d, e.currentMenuId) && !d.isLeaf
+              }])
+            }, [
+              f(d) ? (c(), b(m(L), {
+                key: 0,
+                size: e.iconSize,
+                class: "node-icon",
+                color: s(d)
+              }, {
+                default: v(() => [
+                  h(m(W), {
+                    "icon-name": d?.icon,
+                    "icon-library": m(q).aibox
+                  }, null, 8, ["icon-name", "icon-library"])
+                ]),
+                _: 2
+              }, 1032, ["size", "color"])) : x("", !0),
+              y("span", se, N(T.label), 1),
+              d.isLeaf ? x("", !0) : (c(), g("div", {
+                key: 1,
+                class: "expand-arrow",
+                onClick: U((Se) => u(T), ["stop"])
+              }, [
+                h(m(L), {
+                  size: e.iconSize,
+                  color: s(d)
+                }, {
+                  default: v(() => [
+                    (c(), b(I(
+                      e.expandedKeys.includes(d.id) ? e.expandedIcon : e.collapsedIcon
+                    )))
+                  ]),
+                  _: 2
+                }, 1032, ["size", "color"])
+              ], 8, ae))
+            ], 2)
+          ]),
+          _: 1
+        }, 8, ["data", "props", "height", "current-node-key", "expanded-keys", "item-size", "indent"])
+      ]),
+      _: 1
+    }));
+  }
+}), de = /* @__PURE__ */ k(ue, [["__scopeId", "data-v-0a105c70"]]), fe = { class: "user-popup-content" }, pe = ["onClick"], ye = /* @__PURE__ */ Object.assign({
+  name: "UserPopup"
+}, {
+  __name: "UserPopup",
+  props: {
+    // 操作列表配置
+    actions: {
+      type: Array,
+      default: () => [],
+      validator: (e) => e.every(
+        (n) => n.key && n.label && (n.icon || n.iconName)
+      )
+    }
+  },
+  emits: ["action-click"],
+  setup(e, { emit: n }) {
+    const t = n, l = (o) => {
+      t("action-click", o.key, o);
+    };
+    return (o, f) => (c(), g("div", fe, [
+      (c(!0), g(E, null, B(e.actions, (s, p) => (c(), g(E, { key: p }, [
+        s.hidden ? x("", !0) : (c(), g("div", {
+          key: 0,
+          class: "list__item",
+          onClick: (a) => l(s)
+        }, [
+          h(m(L), {
+            class: "list__item-icon",
+            size: s.iconSize || 20,
+            color: "#262626"
+          }, {
+            default: v(() => [
+              (c(), b(I(s.icon)))
+            ]),
+            _: 2
+          }, 1032, ["size"]),
+          y("span", null, N(s.label), 1)
+        ], 8, pe))
+      ], 64))), 128))
+    ]));
+  }
+}), ge = /* @__PURE__ */ k(ye, [["__scopeId", "data-v-e35d3c80"]]), he = { class: "navbar-box__footer__left" }, me = { class: "name-first" }, ve = { class: "name-text" }, be = { class: "user-id" }, xe = /* @__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
+    }
+  },
+  emits: ["action-click"],
+  setup(e, { emit: n }) {
+    const t = e, l = n, o = A(null), f = A(!1), s = (r) => r && r[0] ? r[0] : "", p = (r) => {
+      r || (o.value = setTimeout(() => {
+        f.value = !1;
+      }, t.popupDelay)), r && (f.value = r, clearTimeout(o.value));
+    }, a = (r, u) => {
+      f.value = !1, l("action-click", r, u);
+    };
+    return (r, u) => (c(), g(E, null, [
+      e.userInfo ? (c(), g("div", {
+        key: 0,
+        class: "navbar-box__footer",
+        onMouseenter: u[0] || (u[0] = (i) => p(!0)),
+        onMouseleave: u[1] || (u[1] = (i) => p(!1))
+      }, [
+        y("div", he, [
+          y("div", me, N(s(e.userInfo?.name)), 1),
+          y("div", null, [
+            y("div", ve, N(e.userInfo?.name), 1),
+            y("div", be, N(e.userInfo?.bnid || e.userInfo?.id || ""), 1)
+          ])
+        ])
+      ], 32)) : x("", !0),
+      h(K, { name: "fade" }, {
+        default: v(() => [
+          H(y("div", {
+            class: "footer-popup content-bg",
+            style: C({ left: e.popupLeft + "px" }),
+            onMouseenter: u[2] || (u[2] = (i) => p(!0)),
+            onMouseleave: u[3] || (u[3] = (i) => p(!1))
+          }, [
+            h(ge, {
+              actions: e.actions,
+              onActionClick: a
+            }, null, 8, ["actions"])
+          ], 36), [
+            [V, f.value]
+          ])
+        ]),
+        _: 1
+      })
+    ], 64));
+  }
+}), Ne = /* @__PURE__ */ k(xe, [["__scopeId", "data-v-d1e53517"]]), ke = { class: "sidebar h-full pd-l-12 pd-r-12 flex flex-col overflow-hidden" }, Ie = /* @__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: ""
+    },
+    // Logo 图标组件
+    logo: {
+      type: [Object, String],
+      default: null
+    },
+    // Logo 尺寸
+    logoSize: {
+      type: Number,
+      default: 30
+    },
+    // 是否显示折叠按钮
+    showToggle: {
+      type: Boolean,
+      default: !0
+    },
+    // 折叠按钮图标
+    toggleIcon: {
+      type: [Object, String],
+      default: null
+    },
+    // ========== 菜单配置 ==========
+    // 树形组件配置
+    treeProps: {
+      type: Object,
+      default: () => w
+    },
+    // 菜单项高度
+    itemHeight: {
+      type: Number,
+      default: 36
+    },
+    // 缩进距离
+    indent: {
+      type: Number,
+      default: 24
+    },
+    // 图标大小
+    iconSize: {
+      type: Number,
+      default: 16
+    },
+    // 标题样式
+    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
+    }
+  },
+  emits: [
+    "toggle",
+    "node-click",
+    "node-expand",
+    "node-collapse",
+    "user-action-click"
+  ],
+  setup(e, { emit: n }) {
+    const t = n, l = () => {
+      t("toggle");
+    }, o = (a, r) => {
+      t("node-click", a, r);
+    }, f = (a, r) => {
+      t("node-expand", a, r);
+    }, s = (a, r) => {
+      t("node-collapse", a, r);
+    }, p = (a, r) => {
+      t("user-action-click", a, r);
+    };
+    return (a, r) => (c(), g("div", ke, [
+      h(Z, {
+        "title-style": e.titleStyle,
+        title: e.title,
+        logo: e.logo,
+        "logo-size": e.logoSize,
+        "show-toggle": e.showToggle,
+        "toggle-icon": e.toggleIcon,
+        onToggle: l
+      }, null, 8, ["title-style", "title", "logo", "logo-size", "show-toggle", "toggle-icon"]),
+      h(de, {
+        "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,
+        "expanded-icon": e.expandedIcon,
+        "collapsed-icon": e.collapsedIcon,
+        "icon-renderer": e.iconRenderer,
+        "icon-library": e.iconLibrary,
+        onNodeClick: o,
+        onNodeExpand: f,
+        onNodeCollapse: s
+      }, null, 8, ["menu-data", "current-menu-id", "expanded-keys", "tree-props", "item-height", "indent", "icon-size", "expanded-icon", "collapsed-icon", "icon-renderer", "icon-library"]),
+      e.showFooter ? (c(), b(Ne, {
+        key: 0,
+        "popup-left": e.popupLeft,
+        "user-info": e.userInfo,
+        actions: e.userActions,
+        "popup-delay": e.popupDelay,
+        onActionClick: p
+      }, null, 8, ["popup-left", "user-info", "actions", "popup-delay"])) : x("", !0)
+    ]));
+  }
+}), we = /* @__PURE__ */ k(Ie, [["__scopeId", "data-v-736b2e19"]]);
+export {
+  z as M,
+  M as N,
+  Ce as S,
+  w as T,
+  _ as a,
+  ne as b,
+  O as c,
+  ze as d,
+  Te as e,
+  oe as f,
+  le as g,
+  j as h,
+  ee as i,
+  Me as j,
+  ie as k,
+  we as l,
+  ce as m,
+  je as n,
+  re as p,
+  te as t
+};