@skyfox2000/webui 0.1.0

package/lib/assets/modules/basicLayout-YP_-EySb.js

@@ -0,0 +1,726 @@
+import { defineComponent as h, createBlock as f, createCommentVNode as _, openBlock as c, unref as t, mergeProps as S, useAttrs as H, computed as K, ref as b, watch as C, withCtx as d, createElementBlock as g, normalizeStyle as z, createElementVNode as y, inject as W, onMounted as N, createVNode as p, toDisplayString as P, Fragment as D, createTextVNode as T, reactive as q, nextTick as J, renderList as G, withModifiers as Q, resolveComponent as X, normalizeClass as Y, KeepAlive as Z, resolveDynamicComponent as ee } from "vue";
+import { theme as O, Breadcrumb as te, Modal as ne, Flex as oe, LayoutHeader as se, Space as le, Avatar as ie, Menu as ce, Tabs as ae, TabPane as re, Layout as U, LayoutSider as pe } from "ant-design-vue";
+import { a as j, _ as I } from "./index-ekkaExvB.js";
+import { createFromIconfont as F, getIconTransform as L, usePageInfo as $, showBreadcrumb as M, crumbs as R, useUserInfo as ue, useSettingInfo as E, initMenu as de, AppRouter as fe, useAppInfo as w } from "@skyfox2000/webbase";
+import { SERVER_HOST as B } from "@skyfox2000/fapi";
+import { mainAppApis as V } from "@skyfox2000/microbase";
+import me from "vue-m-message";
+const xe = /* @__PURE__ */ h({
+  __name: "appicon",
+  props: {
+    icon: {
+      type: String
+    }
+  },
+  setup(s) {
+    const a = s, e = F({
+      iconUrl: `${B.APP_ICONS}`,
+      icon: a.icon
+    });
+    return (r, i) => s.icon ? (c(), f(t(e), S({
+      key: 0,
+      icon: s.icon,
+      class: ["text-2xl", "align-middle", "w-6", "h-6"]
+    }, r.$attrs), null, 16, ["icon"])) : _("", !0);
+  }
+}), ve = ["xlink:href"], ye = /* @__PURE__ */ h({
+  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: a }) {
+    const n = H(), e = s, r = a, i = K(() => {
+      if (Array.isArray(e.size)) return e.size;
+      {
+        let l = e.size;
+        return [l, l];
+      }
+    }), o = b(e.icon), m = b(e.iconIndex);
+    C(
+      () => e.icon,
+      (l) => {
+        o.value = l;
+      }
+    ), C(
+      () => e.iconIndex,
+      (l) => {
+        m.value = l, o.value = e.icons[l];
+      }
+    );
+    const u = K({
+      get() {
+        return m.value;
+      },
+      set(l) {
+        m.value = l, r("update:iconIndex", m.value);
+      }
+    });
+    e.icons.length > 0 ? (u.value = u.value >= e.icons.length ? 0 : u.value, o.value = e.icons[m.value]) : o.value = e.icon;
+    const x = (l) => {
+      if (l.stopPropagation(), e.clickEvent) {
+        const k = e.clickEvent.split("#");
+        k.length === 2 && W("$" + k[0]).$emit(k[1], e.data);
+      }
+      e.autoSwitch && e.icons.length > 0 && (u.value = (u.value + 1) % e.icons.length, o.value = e.icons[m.value]), r("click");
+    }, v = () => {
+      let l = "";
+      return e.spin && (l += "rotate"), e.flip && (l += " flip"), l;
+    };
+    return (l, k) => (c(), f(j, {
+      title: e.tiptext,
+      disabled: e.tiptext ? void 0 : "disabled",
+      color: s.tipcolor,
+      placement: s.placement,
+      size: s.tipsize
+    }, {
+      default: d(() => {
+        var A;
+        return [
+          o.value ? (c(), g("div", {
+            key: 0,
+            class: "re-icon-container",
+            style: z({
+              width: i.value[0].toString(),
+              height: i.value[1].toString()
+            })
+          }, [
+            (A = o.value) != null && A.startsWith("sym-") ? (c(), g("svg", S({ key: 1 }, t(n), {
+              class: ["re-icon symbol", [e.clickable ? "clickable" : "", v(), 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(L)(),
+                color: e.color
+              }
+            }), [
+              y("use", {
+                "xlink:href": "#icon-" + o.value.replace("sym-", "")
+              }, null, 8, ve)
+            ], 16)) : (c(), g("i", S({ key: 0 }, t(n), {
+              class: ["re-icon iconfont fontclass", [e.clickable ? "clickable" : "", "icon-" + o.value, v(), 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(L)(e.angle, e.flip),
+                color: e.color
+              },
+              "aria-hidden": "true",
+              onClick: x
+            }), null, 16))
+          ], 4)) : _("", !0)
+        ];
+      }),
+      _: 1
+    }, 8, ["title", "disabled", "color", "placement", "size"]));
+  }
+}), ge = (s, a) => {
+  const n = s.__vccOpts || s;
+  for (const [e, r] of a)
+    n[e] = r;
+  return n;
+}, _e = /* @__PURE__ */ ge(ye, [["__scopeId", "data-v-e29c02e6"]]), he = /* @__PURE__ */ h({
+  __name: "projectIcon",
+  props: {
+    icon: {
+      type: String
+    },
+    icons: {
+      type: Array
+    },
+    iconUrl: {
+      type: String
+    },
+    monoColor: {
+      type: Boolean,
+      default: !0
+    }
+  },
+  setup(s) {
+    const a = s, e = F({
+      iconUrl: `${a.iconUrl ?? B.PROJECT_ICONS ?? B.TOOL_ICONS}`,
+      monoColor: a.monoColor,
+      icon: a.icon,
+      icons: a.icons
+    });
+    return (r, i) => s.icon || s.icons ? (c(), f(t(e), S({
+      key: 0,
+      icon: s.icon,
+      icons: s.icons
+    }, r.$attrs), null, 16, ["icon", "icons"])) : _("", !0);
+  }
+}), ke = { class: "text-xs leading-[3]" }, be = {
+  key: 0,
+  class: "leading-[2.5] mx-[6px] text-[rgba(0,0,0,0.45)]"
+}, Ce = /* @__PURE__ */ h({
+  __name: "index",
+  setup(s) {
+    const { useToken: a } = O, { token: n } = a(), e = $();
+    return C(
+      () => e.TabActive,
+      () => M()
+    ), N(() => {
+      M();
+    }), (r, i) => (c(), g("div", {
+      class: "ml-5 h-fit p-0 flex items-center justify-between",
+      style: z({
+        backgroundColor: t(n).colorBgContainer
+      })
+    }, [
+      p(t(I), {
+        icon: "icon-home",
+        class: "w-[15px] h-[15px]"
+      }),
+      i[0] || (i[0] = y("span", { class: "leading-[2.5] mx-[6px] text-[rgba(0,0,0,0.45)]" }, ">", -1)),
+      p(t(te), {
+        routes: t(R),
+        separator: ""
+      }, {
+        itemRender: d(({ route: o }) => [
+          y("span", ke, P(o.breadcrumbName), 1),
+          p(t(I), {
+            icon: o.icon,
+            fontsize: "15px"
+          }, null, 8, ["icon"]),
+          o.index < t(R).length - 1 ? (c(), g("span", be, ">")) : _("", !0)
+        ]),
+        _: 1
+      }, 8, ["routes"])
+    ], 4));
+  }
+}), Ie = /* @__PURE__ */ h({
+  __name: "headerExits",
+  setup(s) {
+    const a = ue(), n = b(!1), e = () => {
+      n.value = !1, V.value ? V.value.userLogout() : a.logout();
+    };
+    return (r, i) => (c(), g(D, null, [
+      p(t(I), {
+        icon: "icon-logout",
+        onClick: i[0] || (i[0] = (o) => n.value = !0),
+        clickable: "",
+        class: "w-5 h-5"
+      }),
+      p(t(ne), {
+        open: n.value,
+        "onUpdate:open": i[1] || (i[1] = (o) => n.value = o),
+        title: "确定退出？",
+        "ok-text": "确定",
+        "cancel-text": "取消",
+        width: 380,
+        onOk: e
+      }, {
+        default: d(() => [
+          p(t(oe), {
+            align: "center",
+            justify: "flex-start",
+            style: { padding: "0 32px", margin: "20px 0" }
+          }, {
+            default: d(() => [
+              p(t(I), {
+                icon: "icon-question-circle",
+                color: "orange",
+                class: "w-[60px] h-[60px]"
+              }),
+              i[2] || (i[2] = y("div", { style: { margin: "0 0 0 20px", "font-weight": "400", "font-size": "16px" } }, [
+                T("是否退出系统，"),
+                y("br"),
+                T("清除用户缓存信息？")
+              ], -1))
+            ]),
+            _: 1,
+            __: [2]
+          })
+        ]),
+        _: 1
+      }, 8, ["open"])
+    ], 64));
+  }
+}), Se = { class: "flex items-center" }, we = /* @__PURE__ */ h({
+  __name: "index",
+  setup(s) {
+    const { useToken: a } = O, { token: n } = a(), e = E(), r = () => {
+      e.setMenuCollapse(!e.menuCollapse);
+    };
+    return (i, o) => (c(), f(t(se), {
+      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(n).colorBgContainer
+      })
+    }, {
+      default: d(() => [
+        y("div", Se, [
+          p(t(I), {
+            icon: "icon-menu",
+            class: "w-[18px] h-[18px] cursor-pointer",
+            angle: t(e).menuCollapse ? 90 : 0,
+            onClick: r
+          }, null, 8, ["angle"]),
+          p(Ce)
+        ]),
+        y("div", null, [
+          p(t(le), {
+            size: "middle",
+            class: "flex items-center"
+          }, {
+            default: d(() => [
+              p(t(ie), {
+                class: "avatar",
+                style: { backgroundColor: "#f56a00", fontSize: "14px" },
+                size: 24
+              }, {
+                default: d(() => o[0] || (o[0] = [
+                  T(" U ")
+                ])),
+                _: 1,
+                __: [0]
+              }),
+              p(Ie)
+            ]),
+            _: 1
+          })
+        ])
+      ]),
+      _: 1
+    }, 8, ["style"]));
+  }
+}), ze = /* @__PURE__ */ h({
+  __name: "index",
+  props: {
+    routes: {}
+  },
+  setup(s) {
+    const a = s, n = b([]), e = b([]), r = q([]), i = $(), o = (v) => {
+      w().push(v.key.toString());
+    }, m = E(), u = b([]), x = () => {
+      let v = i.TabActive;
+      const l = v.split("/");
+      l.pop(), n.value = [l.join("/")], m.menuCollapse || (u.value = [l.join("/")]), e.value = [v];
+    };
+    return C(
+      () => m.menuCollapse,
+      (v) => {
+        v || (u.value = [], J(() => {
+          u.value = [...n.value];
+        }));
+      }
+    ), C(
+      () => i.TabActive,
+      () => {
+        x();
+      }
+    ), N(() => {
+      de(a.routes, r, he, { class: "!w-5 !h-5" }), i.setTabActive(fe.currentRoute.value.path), x();
+    }), (v, l) => (c(), f(t(ce), {
+      openKeys: u.value,
+      "onUpdate:openKeys": l[0] || (l[0] = (k) => u.value = k),
+      selectedKeys: e.value,
+      "onUpdate:selectedKeys": l[1] || (l[1] = (k) => e.value = k),
+      mode: "inline",
+      theme: "dark",
+      items: r,
+      onClick: o
+    }, null, 8, ["openKeys", "selectedKeys", "items"]));
+  }
+}), $e = { class: "flex items-center" }, Ae = { class: "flex" }, Te = ["onClick"], Be = /* @__PURE__ */ h({
+  __name: "menuTabs",
+  setup(s) {
+    const { useToken: a } = O, { token: n } = a(), e = $(), r = (o) => {
+      w().push(o);
+    }, i = (o) => {
+      e.removeTabPane(o), w().push(e.TabActive);
+    };
+    return (o, m) => (c(), g("div", {
+      style: z({ height: "38px", backgroundColor: t(n).colorBgBase })
+    }, [
+      p(t(ae), {
+        activeKey: t(e).TabActive,
+        "hide-add": "",
+        size: "small",
+        tabBarStyle: { padding: "0 20px" },
+        onTabClick: r
+      }, {
+        default: d(() => [
+          (c(!0), g(D, null, G(t(e).TabPanes, (u) => (c(), f(t(re), {
+            key: u.key
+          }, {
+            tab: d(() => [
+              y("div", $e, [
+                y("span", Ae, P(u.title), 1),
+                p(t(j), {
+                  title: "关闭",
+                  placement: "top",
+                  size: "small"
+                }, {
+                  default: d(() => [
+                    t(e).TabPanes.length > 1 && u.closable ? (c(), g("div", {
+                      key: 0,
+                      class: "inline-block mx-auto relative flex items-center",
+                      onClick: Q((x) => i(u.key), ["stop"])
+                    }, [
+                      p(t(I), {
+                        icon: "icon-new",
+                        angle: 45,
+                        clickable: "",
+                        class: "w-[15px] h-[15px] ml-1",
+                        tipcolor: t(n).colorBgSpotlight
+                      }, null, 8, ["tipcolor"])
+                    ], 8, Te)) : _("", !0)
+                  ]),
+                  _: 2
+                }, 1024)
+              ])
+            ]),
+            _: 2
+          }, 1024))), 128))
+        ]),
+        _: 1
+      }, 8, ["activeKey"])
+    ], 4));
+  }
+}), Ne = { class: "h-[40px] max-h-[40px] bg-[rgba(240,240,240,0.2)] flex flex-nowrap items-center justify-center text-white font-bold text-lg overflow-hidden text-ellipsis" }, Pe = {
+  key: 0,
+  class: "ml-[10px]"
+}, Re = /* @__PURE__ */ h({
+  __name: "basicLayout",
+  props: {
+    routes: {}
+  },
+  setup(s) {
+    const a = s, n = w(), e = E(), r = $(), i = b("h-[calc(100vh-80px)]");
+    return C(
+      () => e.fullscreen,
+      (o) => {
+        i.value = o ? "h-[calc(100vh-40px)]" : "h-[calc(100vh-80px)]";
+      }
+    ), N(() => {
+      me.closeAll();
+    }), (o, m) => {
+      const u = X("router-view");
+      return c(), f(t(U), { class: "h-screen" }, {
+        default: d(() => [
+          t(e).fullscreen ? _("", !0) : (c(), f(t(pe), {
+            key: 0,
+            class: "overflow-auto h-screen left-0 top-0 bottom-0",
+            collapsed: t(e).menuCollapse,
+            "onUpdate:collapsed": m[0] || (m[0] = (x) => t(e).menuCollapse = x),
+            collapsible: ""
+          }, {
+            default: d(() => [
+              y("div", Ne, [
+                p(j, {
+                  title: t(e).menuCollapse ? t(n).appInfo.Name : "",
+                  placement: "right"
+                }, {
+                  default: d(() => {
+                    var x;
+                    return [
+                      (x = t(n).appInfo.Icon) != null && x.startsWith("sym-") ? (c(), f(_e, {
+                        key: 0,
+                        icon: t(n).appInfo.Icon,
+                        fontsize: "30px",
+                        size: "26px"
+                      }, null, 8, ["icon"])) : (c(), f(xe, {
+                        key: 1,
+                        icon: t(n).appInfo.Icon,
+                        class: "mx-1"
+                      }, null, 8, ["icon"]))
+                    ];
+                  }),
+                  _: 1
+                }, 8, ["title"]),
+                t(e).menuCollapse ? _("", !0) : (c(), g("span", Pe, P(t(n).appInfo.Name), 1))
+              ]),
+              p(ze, {
+                routes: a.routes
+              }, null, 8, ["routes"])
+            ]),
+            _: 1
+          }, 8, ["collapsed"])),
+          p(t(U), { class: "overflow-y-auto block" }, {
+            default: d(() => [
+              t(e).fullscreen ? _("", !0) : (c(), f(we, { key: 0 })),
+              t(r).TabEnabled ? (c(), f(Be, { key: 1 })) : _("", !0),
+              y("div", {
+                class: Y(["relative overflow-y-auto", i.value])
+              }, [
+                p(u, null, {
+                  default: d(({ Component: x, route: v }) => [
+                    (c(), f(Z, {
+                      include: t(n).CachedComponents,
+                      exclude: t(n).ExcludeComponents
+                    }, [
+                      (c(), f(ee(t(n).cacheComponent(x, v))))
+                    ], 1032, ["include", "exclude"]))
+                  ]),
+                  _: 1
+                })
+              ], 2)
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      });
+    };
+  }
+});
+export {
+  _e as I,
+  ge as _,
+  xe as a,
+  he as b,
+  Ce as c,
+  we as d,
+  Ie as e,
+  ze as f,
+  Be as g,
+  Re as h
+};