@skyfox2000/webui 0.1.2 → 0.1.4

package/lib/assets/modules/menuTabs-JxjPoyCD.js

@@ -0,0 +1,639 @@
+import { defineComponent as v, createBlock as h, createCommentVNode as C, openBlock as p, unref as t, mergeProps as I, useAttrs as H, computed as P, ref as _, watch as S, withCtx as m, createElementBlock as g, normalizeStyle as z, createElementVNode as x, inject as D, onMounted as U, createVNode as u, toDisplayString as M, Fragment as R, createTextVNode as A, reactive as q, nextTick as J, renderList as W, withModifiers as G } from "vue";
+import { SERVER_HOST as $ } from "@skyfox2000/fapi";
+import { createFromIconfont as L, getIconTransform as O, usePageInfo as B, showBreadcrumb as j, crumbs as K, useUserInfo as Q, useSettingInfo as V, initMenu as X, AppRouter as Y, useAppInfo as w } from "@skyfox2000/webbase";
+import { a as F, _ as k } from "./index-BEWJ_qAH.js";
+import { theme as N, Breadcrumb as Z, Modal as ee, Flex as te, LayoutHeader as ne, Space as oe, Avatar as se, Menu as ie, Tabs as ce, TabPane as le } from "ant-design-vue";
+import { mainAppApis as E } from "@skyfox2000/microbase";
+const ze = /* @__PURE__ */ v({
+  __name: "appicon",
+  props: {
+    icon: {
+      type: String
+    }
+  },
+  setup(s) {
+    const l = s, e = L({
+      iconUrl: `${$.APP_ICONS}`,
+      icon: l.icon
+    });
+    return (a, c) => s.icon ? (p(), h(t(e), I({
+      key: 0,
+      icon: s.icon,
+      class: ["text-2xl", "align-middle", "w-6", "h-6"]
+    }, a.$attrs), null, 16, ["icon"])) : C("", !0);
+  }
+}), ae = ["xlink:href"], re = /* @__PURE__ */ v({
+  inheritAttrs: !1,
+  __name: "index",
+  props: {
+    /**
+     * 点击后自动切换
+     * @props
+     * @name autoSwitch
+     * @type {boolean}
+     * @default true
+     */
+    autoSwitch: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * 提示标题
+     * @props
+     * @name tiptext
+     * @type {string}
+     */
+    tiptext: {
+      type: String
+    },
+    /**
+     * 提示尺寸
+     * @props
+     * @name tipsize
+     * @type {string}
+     */
+    tipsize: {
+      type: String
+    },
+    /**
+     * 提示背景色
+     * @props
+     * @name tipcolor
+     * @type {string}
+     */
+    tipcolor: {
+      type: String
+    },
+    /**
+     * 提示显示位置
+     * @props
+     * @name placement
+     * @type {string}
+     * @default 'top'
+     */
+    placement: {
+      type: String,
+      default: "top"
+    },
+    /**
+     * IconFont图标
+     * @props
+     * @name icon
+     * @type {string}
+     * @summary IconFont图标显示，使用sym-开头的使用svg模式显示
+     */
+    icon: {
+      type: String
+    },
+    /**
+     * IconFont图标组
+     * @props
+     * @name icons
+     * @type {Array<string>}
+     * @summary IconFont图标组显示，使用sym-开头的使用svg模式显示
+     * @default []
+     */
+    icons: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * 图标索引
+     * @props
+     * @name iconIndex
+     * @type {number}
+     * @default 0
+     */
+    iconIndex: {
+      type: Number,
+      default: 0
+    },
+    /**
+     * 可点击，鼠标手
+     * @props
+     * @name clickable
+     * @type {boolean}
+     * @default false
+     */
+    clickable: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * 点击事件
+     * @props
+     * @name clickEvent
+     * @summary 格式 "空间名#事件名"，空间名和事件名用#分隔，事件名用.分隔
+     * @type {string}
+     */
+    clickEvent: {
+      type: String
+    },
+    /**
+     * 点击传输数据
+     * @props
+     * @name data
+     * @summary 点击事件传输的默认数据
+     * @type {object|string}
+     */
+    data: {
+      type: [Object, String]
+    },
+    /**
+     * 字体大小
+     * @props
+     * @name size
+     * @summary 字体大小
+     * @type {string}
+     * @default 20px
+     */
+    fontsize: {
+      type: String,
+      // 大小
+      default: "20px"
+    },
+    /**
+     * 空间大小
+     * @props
+     * @name size
+     * @summary 空间大小
+     * @type {string, [string, string]}
+     * @default 20px
+     */
+    size: {
+      type: [String, Array],
+      // 大小
+      default: () => ["20px", "20px"]
+    },
+    /**
+     * 图标位置
+     * @props
+     * @name position
+     * @summary 图标位置
+     * @type {[string|number, string|number]}
+     */
+    position: {
+      type: Array
+      // 图标位置
+    },
+    /**
+     * 旋转中心
+     * @props
+     * @name center
+     * @summary 旋转中心
+     * @type {string}
+     */
+    center: {
+      type: String
+      // 旋转中心
+    },
+    /**
+     * 指定角度
+     * @props
+     * @name angle
+     * @summary 指定角度
+     * @type {number}
+     */
+    angle: {
+      type: Number
+      // 指定角度
+    },
+    /**
+     * 颜色
+     * @props
+     * @name color
+     * @summary 颜色
+     * @type {string}
+     */
+    color: {
+      type: String,
+      // 颜色
+      default: ""
+    },
+    /**
+     * 样式
+     * @props
+     * @name hovercolor
+     * @summary 样式
+     * @type {string}
+     */
+    className: {
+      type: String,
+      // 样式
+      default: ""
+    },
+    /**
+     * 水平翻转
+     * @props
+     * @name flip
+     * @summary 水平翻转
+     * @type {boolean}
+     * @default false
+     */
+    flip: {
+      type: Boolean,
+      // 水平翻转
+      default: !1
+    },
+    /**
+     * 自动旋转
+     * @props
+     * @name spin
+     * @summary 自动旋转
+     * @type {boolean}
+     * @default false
+     */
+    spin: {
+      type: Boolean,
+      // 自动旋转
+      default: !1
+    }
+  },
+  emits: [
+    /**
+     * 点击事件
+     * @emits
+     * @name click
+     * @summary 图标按钮点击时触发的事件
+     */
+    "click",
+    /**
+     * 图标索引更新
+     * @emits
+     * @name update:iconIndex
+     * @summary 图标索引发生变化时触发的事件
+     * @param {number} index - 新的图标索引
+     */
+    "update:iconIndex"
+  ],
+  setup(s, { emit: l }) {
+    const i = H(), e = s, a = l, c = P(() => {
+      if (Array.isArray(e.size)) return e.size;
+      {
+        let o = e.size;
+        return [o, o];
+      }
+    }), n = _(e.icon), d = _(e.iconIndex);
+    S(
+      () => e.icon,
+      (o) => {
+        n.value = o;
+      }
+    ), S(
+      () => e.iconIndex,
+      (o) => {
+        d.value = o, n.value = e.icons[o];
+      }
+    );
+    const r = P({
+      get() {
+        return d.value;
+      },
+      set(o) {
+        d.value = o, a("update:iconIndex", d.value);
+      }
+    });
+    e.icons.length > 0 ? (r.value = r.value >= e.icons.length ? 0 : r.value, n.value = e.icons[d.value]) : n.value = e.icon;
+    const b = (o) => {
+      if (o.stopPropagation(), e.clickEvent) {
+        const y = e.clickEvent.split("#");
+        y.length === 2 && D("$" + y[0]).$emit(y[1], e.data);
+      }
+      e.autoSwitch && e.icons.length > 0 && (r.value = (r.value + 1) % e.icons.length, n.value = e.icons[d.value]), a("click");
+    }, f = () => {
+      let o = "";
+      return e.spin && (o += "rotate"), e.flip && (o += " flip"), o;
+    };
+    return (o, y) => (p(), h(F, {
+      title: e.tiptext,
+      disabled: e.tiptext ? void 0 : "disabled",
+      color: s.tipcolor,
+      placement: s.placement,
+      size: s.tipsize
+    }, {
+      default: m(() => {
+        var T;
+        return [
+          n.value ? (p(), g("div", {
+            key: 0,
+            class: "re-icon-container",
+            style: z({
+              width: c.value[0].toString(),
+              height: c.value[1].toString()
+            })
+          }, [
+            (T = n.value) != null && T.startsWith("sym-") ? (p(), g("svg", I({ key: 1 }, t(i), {
+              class: ["re-icon symbol", [e.clickable ? "clickable" : "", f(), e.className]],
+              "aria-hidden": "true",
+              style: {
+                top: e.position ? e.position[1] : 0,
+                left: e.position ? e.position[0] : 0,
+                fontSize: e.fontsize,
+                transformOrigin: e.center ?? "center center",
+                transform: t(O)(),
+                color: e.color
+              }
+            }), [
+              x("use", {
+                "xlink:href": "#icon-" + n.value.replace("sym-", "")
+              }, null, 8, ae)
+            ], 16)) : (p(), g("i", I({ key: 0 }, t(i), {
+              class: ["re-icon iconfont fontclass", [e.clickable ? "clickable" : "", "icon-" + n.value, f(), e.className]],
+              style: {
+                top: e.position ? e.position[1] : 1,
+                left: e.position ? e.position[0] : 0,
+                fontSize: e.fontsize,
+                transformOrigin: e.center ?? "center center",
+                transform: t(O)(e.angle, e.flip),
+                color: e.color
+              },
+              "aria-hidden": "true",
+              onClick: b
+            }), null, 16))
+          ], 4)) : C("", !0)
+        ];
+      }),
+      _: 1
+    }, 8, ["title", "disabled", "color", "placement", "size"]));
+  }
+}), ue = (s, l) => {
+  const i = s.__vccOpts || s;
+  for (const [e, a] of l)
+    i[e] = a;
+  return i;
+}, Te = /* @__PURE__ */ ue(re, [["__scopeId", "data-v-e29c02e6"]]), pe = /* @__PURE__ */ v({
+  __name: "projectIcon",
+  props: {
+    icon: {
+      type: String
+    },
+    icons: {
+      type: Array
+    },
+    iconUrl: {
+      type: String
+    },
+    monoColor: {
+      type: Boolean,
+      default: !0
+    }
+  },
+  setup(s) {
+    const l = s, e = L({
+      iconUrl: `${l.iconUrl ?? $.PROJECT_ICONS ?? $.TOOL_ICONS}`,
+      monoColor: l.monoColor,
+      icon: l.icon,
+      icons: l.icons
+    });
+    return (a, c) => s.icon || s.icons ? (p(), h(t(e), I({
+      key: 0,
+      icon: s.icon,
+      icons: s.icons,
+      class: ["align-middle"]
+    }, a.$attrs), null, 16, ["icon", "icons"])) : C("", !0);
+  }
+}), de = { class: "text-xs leading-[3]" }, fe = {
+  key: 0,
+  class: "leading-[2.5] mx-[6px] text-[rgba(0,0,0,0.45)]"
+}, me = /* @__PURE__ */ v({
+  __name: "index",
+  setup(s) {
+    const { useToken: l } = N, { token: i } = l(), e = B();
+    return S(
+      () => e.TabActive,
+      () => j()
+    ), U(() => {
+      j();
+    }), (a, c) => (p(), g("div", {
+      class: "ml-5 h-fit p-0 flex items-center justify-between",
+      style: z({
+        backgroundColor: t(i).colorBgContainer
+      })
+    }, [
+      u(t(k), {
+        icon: "icon-home",
+        class: "w-[15px] h-[15px]"
+      }),
+      c[0] || (c[0] = x("span", { class: "leading-[2.5] mx-[6px] text-[rgba(0,0,0,0.45)]" }, ">", -1)),
+      u(t(Z), {
+        routes: t(K),
+        separator: ""
+      }, {
+        itemRender: m(({ route: n }) => [
+          x("span", de, M(n.breadcrumbName), 1),
+          u(t(k), {
+            icon: n.icon,
+            fontsize: "15px"
+          }, null, 8, ["icon"]),
+          n.index < t(K).length - 1 ? (p(), g("span", fe, ">")) : C("", !0)
+        ]),
+        _: 1
+      }, 8, ["routes"])
+    ], 4));
+  }
+}), ge = /* @__PURE__ */ v({
+  __name: "headerExits",
+  setup(s) {
+    const l = Q(), i = _(!1), e = () => {
+      i.value = !1, E.value ? E.value.userLogout() : l.logout();
+    };
+    return (a, c) => (p(), g(R, null, [
+      u(t(k), {
+        icon: "icon-logout",
+        onClick: c[0] || (c[0] = (n) => i.value = !0),
+        clickable: "",
+        class: "w-5 h-5"
+      }),
+      u(t(ee), {
+        open: i.value,
+        "onUpdate:open": c[1] || (c[1] = (n) => i.value = n),
+        title: "确定退出？",
+        "ok-text": "确定",
+        "cancel-text": "取消",
+        width: 380,
+        onOk: e
+      }, {
+        default: m(() => [
+          u(t(te), {
+            align: "center",
+            justify: "flex-start",
+            style: { padding: "0 32px", margin: "20px 0" }
+          }, {
+            default: m(() => [
+              u(t(k), {
+                icon: "icon-question-circle",
+                color: "orange",
+                class: "w-[60px] h-[60px]"
+              }),
+              c[2] || (c[2] = x("div", { style: { margin: "0 0 0 20px", "font-weight": "400", "font-size": "16px" } }, [
+                A("是否退出系统，"),
+                x("br"),
+                A("清除用户缓存信息？")
+              ], -1))
+            ]),
+            _: 1,
+            __: [2]
+          })
+        ]),
+        _: 1
+      }, 8, ["open"])
+    ], 64));
+  }
+}), xe = { class: "flex items-center" }, Ae = /* @__PURE__ */ v({
+  __name: "index",
+  setup(s) {
+    const { useToken: l } = N, { token: i } = l(), e = V(), a = () => {
+      e.setMenuCollapse(!e.menuCollapse);
+    };
+    return (c, n) => (p(), h(t(ne), {
+      class: "w-full relative z-[1] shadow-[0_-3px_6px_#000] py-0 flex items-center justify-between",
+      style: z({
+        height: "40px",
+        lineHeight: "1",
+        paddingLeft: "10px",
+        paddingRight: "10px",
+        backgroundColor: t(i).colorBgContainer
+      })
+    }, {
+      default: m(() => [
+        x("div", xe, [
+          u(t(k), {
+            icon: "icon-menu",
+            class: "w-[18px] h-[18px] cursor-pointer",
+            angle: t(e).menuCollapse ? 90 : 0,
+            onClick: a
+          }, null, 8, ["angle"]),
+          u(me)
+        ]),
+        x("div", null, [
+          u(t(oe), {
+            size: "middle",
+            class: "flex items-center"
+          }, {
+            default: m(() => [
+              u(t(se), {
+                class: "avatar",
+                style: { backgroundColor: "#f56a00", fontSize: "14px" },
+                size: 24
+              }, {
+                default: m(() => n[0] || (n[0] = [
+                  A(" U ")
+                ])),
+                _: 1,
+                __: [0]
+              }),
+              u(ge)
+            ]),
+            _: 1
+          })
+        ])
+      ]),
+      _: 1
+    }, 8, ["style"]));
+  }
+}), $e = /* @__PURE__ */ v({
+  __name: "index",
+  props: {
+    routes: {}
+  },
+  setup(s) {
+    const l = s, i = _([]), e = _([]), a = q([]), c = B(), n = (f) => {
+      w().push(f.key.toString());
+    }, d = V(), r = _([]), b = () => {
+      let f = c.TabActive;
+      const o = f.split("/");
+      o.pop(), i.value = [o.join("/")], d.menuCollapse || (r.value = [o.join("/")]), e.value = [f];
+    };
+    return S(
+      () => d.menuCollapse,
+      (f) => {
+        f || (r.value = [], J(() => {
+          r.value = [...i.value];
+        }));
+      }
+    ), S(
+      () => c.TabActive,
+      () => {
+        b();
+      }
+    ), U(() => {
+      X(l.routes, a, pe, { class: "!w-5 !h-5" }), c.setTabActive(Y.currentRoute.value.path), b();
+    }), (f, o) => (p(), h(t(ie), {
+      openKeys: r.value,
+      "onUpdate:openKeys": o[0] || (o[0] = (y) => r.value = y),
+      selectedKeys: e.value,
+      "onUpdate:selectedKeys": o[1] || (o[1] = (y) => e.value = y),
+      mode: "inline",
+      theme: "dark",
+      items: a,
+      onClick: n
+    }, null, 8, ["openKeys", "selectedKeys", "items"]));
+  }
+}), ye = { class: "flex items-center" }, ve = { class: "flex" }, _e = ["onClick"], we = /* @__PURE__ */ v({
+  __name: "menuTabs",
+  setup(s) {
+    const { useToken: l } = N, { token: i } = l(), e = B(), a = (n) => {
+      w().push(n);
+    }, c = (n) => {
+      e.removeTabPane(n), w().push(e.TabActive);
+    };
+    return (n, d) => (p(), g("div", {
+      style: z({ height: "38px", backgroundColor: t(i).colorBgBase })
+    }, [
+      u(t(ce), {
+        activeKey: t(e).TabActive,
+        "hide-add": "",
+        size: "small",
+        tabBarStyle: { padding: "0 20px" },
+        onTabClick: a
+      }, {
+        default: m(() => [
+          (p(!0), g(R, null, W(t(e).TabPanes, (r) => (p(), h(t(le), {
+            key: r.key
+          }, {
+            tab: m(() => [
+              x("div", ye, [
+                x("span", ve, M(r.title), 1),
+                u(t(F), {
+                  title: "关闭",
+                  placement: "top",
+                  size: "small"
+                }, {
+                  default: m(() => [
+                    t(e).TabPanes.length > 1 && r.closable ? (p(), g("div", {
+                      key: 0,
+                      class: "inline-block mx-auto relative flex items-center",
+                      onClick: G((b) => c(r.key), ["stop"])
+                    }, [
+                      u(t(k), {
+                        icon: "icon-new",
+                        angle: 45,
+                        clickable: "",
+                        class: "w-[15px] h-[15px] ml-1",
+                        tipcolor: t(i).colorBgSpotlight
+                      }, null, 8, ["tipcolor"])
+                    ], 8, _e)) : C("", !0)
+                  ]),
+                  _: 2
+                }, 1024)
+              ])
+            ]),
+            _: 2
+          }, 1024))), 128))
+        ]),
+        _: 1
+      }, 8, ["activeKey"])
+    ], 4));
+  }
+});
+export {
+  Te as I,
+  ue as _,
+  ze as a,
+  pe as b,
+  me as c,
+  Ae as d,
+  ge as e,
+  $e as f,
+  we as g
+};