@done-coding/admin-core 0.18.0 → 0.19.0

package/es/components/app-layout/AppHeader.vue2.mjs

@@ -1,8 +1,11 @@
-import { defineComponent as k, useCssVars as g, inject as d, computed as a, watch as P, nextTick as E, openBlock as r, createElementBlock as s, normalizeStyle as A, createElementVNode as i, renderSlot as p, normalizeClass as m, Fragment as B, renderList as $, createBlock as h, unref as w, withCtx as I, resolveDynamicComponent as L, createCommentVNode as v, toDisplayString as x } from "vue";
-import { useRouter as T } from "vue-router";
-import { ElIcon as V } from "element-plus";
-import { APP_LAYOUT_APP_STORE_KEY as Y, APP_LAYOUT_BRIDGE_KEY as b } from "../../inject/key.mjs";
-const D = { class: "app-header-shim" }, O = ["name", "onClick"], R = { class: "app-header-right" }, U = /* @__PURE__ */ k({
+import { defineComponent, useCssVars, inject, computed, watch, nextTick, openBlock, createElementBlock, normalizeStyle, createElementVNode, renderSlot, normalizeClass, Fragment, renderList, createBlock, unref, withCtx, resolveDynamicComponent, createCommentVNode, toDisplayString } from "vue";
+import { useRouter } from "vue-router";
+import { ElIcon } from "element-plus";
+import { APP_LAYOUT_APP_STORE_KEY, APP_LAYOUT_BRIDGE_KEY } from "../../inject/key.mjs";
+const _hoisted_1 = { class: "app-header-shim" };
+const _hoisted_2 = ["name", "onClick"];
+const _hoisted_3 = { class: "app-header-right" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "AppHeader",
   props: {
     show: { type: Boolean },
@@ -11,71 +14,91 @@ const D = { class: "app-header-shim" }, O = ["name", "onClick"], R = { class: "a
     activeModuleMenu: {},
     menuFlatList: {}
   },
-  setup(c) {
-    g((t) => ({
-      v8834c284: y.value.primaryColor
+  setup(__props) {
+    useCssVars((_ctx) => ({
+      "v8834c284": themeColors.value.primaryColor
     }));
-    const n = c, _ = d(Y), f = d(b), y = a(() => f.themeColors.value), C = a(() => _.headerStyle), M = T(), u = `app-header-module_${Math.random().toString(36).substring(2)}`, S = a(() => n.menus), l = a({
+    const props = __props;
+    const appStore = inject(APP_LAYOUT_APP_STORE_KEY);
+    const bridge = inject(APP_LAYOUT_BRIDGE_KEY);
+    const themeColors = computed(() => bridge.themeColors.value);
+    const headerStyle = computed(() => appStore.headerStyle);
+    const router = useRouter();
+    const moduleBoxCls = `app-header-module_${Math.random().toString(36).substring(2)}`;
+    const showModuleMenu = computed(() => {
+      return props.menus;
+    });
+    const activeModulePath = computed({
       get() {
-        var t;
-        return (t = n.activeModuleMenu) == null ? void 0 : t.path;
+        var _a;
+        return (_a = props.activeModuleMenu) == null ? void 0 : _a.path;
       },
-      set(t) {
-        var o, e;
-        ((e = (o = n.activeMenu) == null ? void 0 : o.parentPathList) == null ? void 0 : e[0]) !== t && M.push(t);
+      set(value) {
+        var _a, _b;
+        if (((_b = (_a = props.activeMenu) == null ? void 0 : _a.parentPathList) == null ? void 0 : _b[0]) === value) {
+          return;
+        }
+        router.push(value);
       }
     });
-    return P(
-      l,
-      (t) => {
-        t && E(() => {
-          var o, e;
-          (e = (o = document.querySelector(`.${u}`)) == null ? void 0 : o.querySelector(`[name="${t}"]`)) == null || e.scrollIntoView({
-            behavior: "smooth"
+    watch(
+      activeModulePath,
+      (n) => {
+        if (n) {
+          nextTick(() => {
+            var _a, _b;
+            (_b = (_a = document.querySelector(`.${moduleBoxCls}`)) == null ? void 0 : _a.querySelector(`[name="${n}"]`)) == null ? void 0 : _b.scrollIntoView({
+              behavior: "smooth"
+            });
           });
-        });
+        }
       },
       {
-        immediate: !0
+        immediate: true
       }
-    ), (t, o) => (r(), s("div", {
-      class: "app-header",
-      style: A(C.value)
-    }, [
-      i("div", D, [
-        p(t.$slots, "left", {}, void 0, !0),
-        S.value ? (r(), s("div", {
-          key: 0,
-          class: m(["app-header-module", u])
-        }, [
-          (r(!0), s(B, null, $(c.menus, (e) => (r(), s("div", {
-            key: e.path,
-            name: e.path,
-            class: m([
-              "app-header-module-item",
-              l.value === e.path ? "app-header-module-item_active" : ""
-            ]),
-            onClick: (q) => l.value = e.path
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: "app-header",
+        style: normalizeStyle(headerStyle.value)
+      }, [
+        createElementVNode("div", _hoisted_1, [
+          renderSlot(_ctx.$slots, "left", {}, void 0, true),
+          showModuleMenu.value ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: normalizeClass(["app-header-module", moduleBoxCls])
           }, [
-            e.menuIcon ? (r(), h(w(V), {
-              key: 0,
-              class: "app-header-module-item__icon"
-            }, {
-              default: I(() => [
-                (r(), h(L(e.menuIcon)))
-              ]),
-              _: 2
-            }, 1024)) : v("", !0),
-            i("span", null, x(e.title), 1)
-          ], 10, O))), 128))
-        ])) : v("", !0),
-        i("div", R, [
-          p(t.$slots, "right", {}, void 0, !0)
+            (openBlock(true), createElementBlock(Fragment, null, renderList(__props.menus, (menu) => {
+              return openBlock(), createElementBlock("div", {
+                key: menu.path,
+                name: menu.path,
+                class: normalizeClass([
+                  "app-header-module-item",
+                  activeModulePath.value === menu.path ? "app-header-module-item_active" : ""
+                ]),
+                onClick: ($event) => activeModulePath.value = menu.path
+              }, [
+                menu.menuIcon ? (openBlock(), createBlock(unref(ElIcon), {
+                  key: 0,
+                  class: "app-header-module-item__icon"
+                }, {
+                  default: withCtx(() => [
+                    (openBlock(), createBlock(resolveDynamicComponent(menu.menuIcon)))
+                  ]),
+                  _: 2
+                }, 1024)) : createCommentVNode("", true),
+                createElementVNode("span", null, toDisplayString(menu.title), 1)
+              ], 10, _hoisted_2);
+            }), 128))
+          ])) : createCommentVNode("", true),
+          createElementVNode("div", _hoisted_3, [
+            renderSlot(_ctx.$slots, "right", {}, void 0, true)
+          ])
         ])
-      ])
-    ], 4));
+      ], 4);
+    };
   }
 });
 export {
-  U as default
+  _sfc_main as default
 };

package/es/components/app-layout/AppLayout.vue.mjs

@@ -1,7 +1,7 @@
-import o from "./AppLayout.vue2.mjs";
+import _sfc_main from "./AppLayout.vue2.mjs";
 /* empty css                */
-import t from "../../_virtual/_plugin-vue_export-helper.mjs";
-const a = /* @__PURE__ */ t(o, [["__scopeId", "data-v-f6f87b30"]]);
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
+const AppLayout = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-f6f87b30"]]);
 export {
-  a as default
+  AppLayout as default
 };

package/es/components/app-layout/AppLayout.vue2.mjs

@@ -1,148 +1,184 @@
-import { defineComponent as H, computed as o, provide as m, markRaw as O, watch as v, openBlock as i, createElementBlock as g, normalizeClass as I, createVNode as p, unref as a, withCtx as n, createBlock as f, resolveDynamicComponent as S, createSlots as D, normalizeStyle as Y, createCommentVNode as x, renderList as B, renderSlot as G } from "vue";
-import { ElWatermark as $ } from "element-plus";
-import { useRoute as N, useRouter as U } from "vue-router";
-import z from "./AppBody.vue.mjs";
-import K from "./AppShell.vue.mjs";
-import V from "../modal/ModalShelf.vue.mjs";
-import { themeScaleToRgba as W } from "../../utils/theme-scale.mjs";
-import { APP_LAYOUT_BRIDGE_KEY as j, APP_LAYOUT_APP_STORE_KEY as q, APP_LAYOUT_USER_STORE_KEY as J } from "../../inject/key.mjs";
-import { useCoreThemeApply as Q } from "../../hooks/use-theme-apply.mjs";
-import { useCoreViewportApply as X } from "../../hooks/use-viewport-apply.mjs";
-import { flatRouteMetaResolveRaw as Z } from "../../utils/router.mjs";
-import { useMenusDataDispatch as ee } from "../../hooks/menus-dispatch.mjs";
-const ce = /* @__PURE__ */ H({
+import { defineComponent, computed, provide, markRaw, watch, openBlock, createElementBlock, normalizeClass, createVNode, unref, withCtx, createBlock, resolveDynamicComponent, createSlots, normalizeStyle, createCommentVNode, renderList, renderSlot } from "vue";
+import { ElWatermark } from "element-plus";
+import { useRoute, useRouter } from "vue-router";
+import AppBody from "./AppBody.vue.mjs";
+import _sfc_main$1 from "./AppShell.vue.mjs";
+import _sfc_main$2 from "../modal/ModalShelf.vue.mjs";
+import { themeScaleToRgba } from "../../utils/theme-scale.mjs";
+import { APP_LAYOUT_BRIDGE_KEY, APP_LAYOUT_APP_STORE_KEY, APP_LAYOUT_USER_STORE_KEY } from "../../inject/key.mjs";
+import { useCoreThemeApply } from "../../hooks/use-theme-apply.mjs";
+import { useCoreViewportApply } from "../../hooks/use-viewport-apply.mjs";
+import { flatRouteMetaResolveRaw } from "../../utils/router.mjs";
+import { useMenusDataDispatch } from "../../hooks/menus-dispatch.mjs";
+const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "AppLayout",
   props: {
     bridge: {},
     appStore: {},
     userStore: {},
     watermarkContent: {},
-    sidebarAboveHeader: { type: Boolean, default: !1 }
+    sidebarAboveHeader: { type: Boolean, default: false }
   },
-  setup(u) {
-    const e = u, b = o(() => ({
-      color: W(e.bridge.themeColors.value.baseColor, 0.12),
+  setup(__props) {
+    const props = __props;
+    const watermarkFont = computed(() => ({
+      color: themeScaleToRgba(props.bridge.themeColors.value.baseColor, 0.12),
       fontSize: 12
     }));
-    m(j, e.bridge), m(q, e.appStore), m(J, e.userStore), Q({
-      getThemeConfig: () => e.bridge.APP_THEME_CONFIG,
-      getThemeIsDark: () => e.bridge.themeIsDark.value,
+    provide(APP_LAYOUT_BRIDGE_KEY, props.bridge);
+    provide(APP_LAYOUT_APP_STORE_KEY, props.appStore);
+    provide(APP_LAYOUT_USER_STORE_KEY, props.userStore);
+    useCoreThemeApply({
+      getThemeConfig: () => props.bridge.APP_THEME_CONFIG,
+      getThemeIsDark: () => props.bridge.themeIsDark.value,
       // 节奏挂值（density/motion）：喂新响应式源给同一挂值钩子，注入独立 dc-core-rhythm <style>
-      getThemeDensity: () => e.bridge.themeDensity.value,
-      getThemeMotion: () => e.bridge.themeMotion.value
-    }), X({
-      getViewportConfig: () => e.bridge.APP_LAYOUT_VIEWPORT_CONFIG,
-      getGapConfig: () => e.bridge.APP_LAYOUT_GAP_CONFIG
+      getThemeDensity: () => props.bridge.themeDensity.value,
+      getThemeMotion: () => props.bridge.themeMotion.value
     });
-    const l = o(() => e.bridge.generateRouteMetaRawTree(e.bridge.getRoutes(), {
-      parentPath: "",
-      filterFn: (t, s, r) => t.checkPermission ? t.menuShow && e.userStore.havePermissionByKey(t.permissionKey) : t.menuShow && (!r || s),
-      sortFn: (t, s) => t.menuSort - s.menuSort
-    })), d = o(() => Z(l.value)), {
-      sidebarMenus: c,
-      headerMenus: _,
-      activeMenu: A,
-      activeModuleMenu: M,
-      needRedirectToFirstChildMenu: y
-    } = ee({
-      getMenus: () => l.value,
-      getMenuFlatList: () => d.value,
+    useCoreViewportApply({
+      getViewportConfig: () => props.bridge.APP_LAYOUT_VIEWPORT_CONFIG,
+      getGapConfig: () => props.bridge.APP_LAYOUT_GAP_CONFIG
+    });
+    const menus = computed(() => {
+      return props.bridge.generateRouteMetaRawTree(props.bridge.getRoutes(), {
+        parentPath: "",
+        filterFn: (raw, haveChildren, haveChildrenRaw) => {
+          if (raw.checkPermission) {
+            return raw.menuShow && props.userStore.havePermissionByKey(raw.permissionKey);
+          } else {
+            return raw.menuShow && (!haveChildrenRaw || haveChildren);
+          }
+        },
+        sortFn: (a, b) => {
+          return a.menuSort - b.menuSort;
+        }
+      });
+    });
+    const menuFlatList = computed(() => {
+      return flatRouteMetaResolveRaw(menus.value);
+    });
+    const {
+      sidebarMenus,
+      headerMenus,
+      activeMenu,
+      activeModuleMenu,
+      needRedirectToFirstChildMenu
+    } = useMenusDataDispatch({
+      getMenus: () => menus.value,
+      getMenuFlatList: () => menuFlatList.value,
       // 分流意图**纯归布局**（preset.layout.extractLevel1ToHeader，经 themeLayout 暴露）：
       // true 时 1 级路由模块提取到 header（headerMenus 才有内容）、sidebar 显模块下子菜单；
       // 缺省 false → 经典布局（全菜单在 sidebar、headerMenus 空）。appStore 不再持此意图。
-      getExtractLevel1ToHeader: () => e.bridge.themeLayout.value.extractLevel1ToHeader
-    }), w = O(K), C = o(
-      () => e.bridge.themeLayout.value.shell ?? w
-    ), L = [
+      getExtractLevel1ToHeader: () => props.bridge.themeLayout.value.extractLevel1ToHeader
+    });
+    const defaultShell = markRaw(_sfc_main$1);
+    const resolvedShell = computed(
+      () => props.bridge.themeLayout.value.shell ?? defaultShell
+    );
+    const contentAnchorNames = [
       "brand",
       "userEntry",
       "settings",
       "themeSwitcher",
       "aside"
-    ], P = o(() => e.userStore.isLogin), h = o(() => e.appStore.showHeader), T = o(() => e.appStore.showSidebar), R = o(() => ({
+    ];
+    const isLogin = computed(() => props.userStore.isLogin);
+    const showHeader = computed(() => props.appStore.showHeader);
+    const showSidebar = computed(() => props.appStore.showSidebar);
+    const headerGapCoverStyle = computed(() => ({
       position: "fixed",
       top: "0",
       left: "0",
       right: "0",
-      height: `calc(${e.appStore.headerStyle.top} + ${e.appStore.headerStyle.height})`,
-      background: e.bridge.themeColors.value.bodyColor,
+      height: `calc(${props.appStore.headerStyle.top} + ${props.appStore.headerStyle.height})`,
+      background: props.bridge.themeColors.value.bodyColor,
       zIndex: 1,
       pointerEvents: "none"
-    })), E = o(() => e.appStore.showAside);
-    v(
-      () => c.value.length,
-      (t) => {
-        e.appStore.changeSidebarHasMenusStatus(!!t);
+    }));
+    const showAside = computed(() => props.appStore.showAside);
+    watch(
+      () => sidebarMenus.value.length,
+      (n) => {
+        props.appStore.changeSidebarHasMenusStatus(!!n);
       },
       {
-        immediate: !0
+        immediate: true
       }
     );
-    const k = N(), F = U();
-    return v(
-      y,
-      (t) => {
-        t && (console.log(`${k.path}需要重定向到${t.path}`), F.replace(t.path));
+    const route = useRoute();
+    const router = useRouter();
+    watch(
+      needRedirectToFirstChildMenu,
+      (n) => {
+        if (n) {
+          console.log(`${route.path}需要重定向到${n.path}`);
+          router.replace(n.path);
+        }
       },
       {
-        immediate: !0
+        immediate: true
       }
-    ), (t, s) => (i(), g("div", {
-      class: I(["app-layout", {
-        "app-layout_noLogin": !P.value
-      }])
-    }, [
-      p(a($), {
-        content: u.watermarkContent,
-        font: b.value,
-        zIndex: 1e4
-      }, {
-        default: n(() => [
-          p(a(V), { level: "app" }, {
-            default: n(() => [
-              (i(), f(S(C.value), {
-                menus: l.value,
-                menuFlatList: d.value,
-                sidebarMenus: a(c),
-                headerMenus: a(_),
-                activeMenu: a(A),
-                activeModuleMenu: a(M),
-                showHeader: h.value,
-                showSidebar: T.value,
-                showAside: E.value,
-                sidebarAboveHeader: u.sidebarAboveHeader
-              }, D({
-                default: n(({ Footer: r }) => [
-                  p(z, { menuFlatList: d.value }, {
-                    footer: n(() => [
-                      (i(), f(S(r)))
-                    ]),
-                    _: 2
-                  }, 1032, ["menuFlatList"]),
-                  h.value ? (i(), g("div", {
-                    key: 0,
-                    class: "app-header-gap-cover",
-                    style: Y(R.value)
-                  }, null, 4)) : x("", !0)
-                ]),
-                _: 2
-              }, [
-                B(L, (r) => ({
-                  name: r,
-                  fn: n(() => [
-                    G(t.$slots, r, {}, void 0, !0)
-                  ])
-                }))
-              ]), 1032, ["menus", "menuFlatList", "sidebarMenus", "headerMenus", "activeMenu", "activeModuleMenu", "showHeader", "showSidebar", "showAside", "sidebarAboveHeader"]))
-            ]),
-            _: 3
-          })
-        ]),
-        _: 3
-      }, 8, ["content", "font"])
-    ], 2));
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["app-layout", {
+          "app-layout_noLogin": !isLogin.value
+        }])
+      }, [
+        createVNode(unref(ElWatermark), {
+          content: __props.watermarkContent,
+          font: watermarkFont.value,
+          zIndex: 1e4
+        }, {
+          default: withCtx(() => [
+            createVNode(unref(_sfc_main$2), { level: "app" }, {
+              default: withCtx(() => [
+                (openBlock(), createBlock(resolveDynamicComponent(resolvedShell.value), {
+                  menus: menus.value,
+                  menuFlatList: menuFlatList.value,
+                  sidebarMenus: unref(sidebarMenus),
+                  headerMenus: unref(headerMenus),
+                  activeMenu: unref(activeMenu),
+                  activeModuleMenu: unref(activeModuleMenu),
+                  showHeader: showHeader.value,
+                  showSidebar: showSidebar.value,
+                  showAside: showAside.value,
+                  sidebarAboveHeader: __props.sidebarAboveHeader
+                }, createSlots({
+                  default: withCtx(({ Footer }) => [
+                    createVNode(AppBody, { menuFlatList: menuFlatList.value }, {
+                      footer: withCtx(() => [
+                        (openBlock(), createBlock(resolveDynamicComponent(Footer)))
+                      ]),
+                      _: 2
+                    }, 1032, ["menuFlatList"]),
+                    showHeader.value ? (openBlock(), createElementBlock("div", {
+                      key: 0,
+                      class: "app-header-gap-cover",
+                      style: normalizeStyle(headerGapCoverStyle.value)
+                    }, null, 4)) : createCommentVNode("", true)
+                  ]),
+                  _: 2
+                }, [
+                  renderList(contentAnchorNames, (name) => {
+                    return {
+                      name,
+                      fn: withCtx(() => [
+                        renderSlot(_ctx.$slots, name, {}, void 0, true)
+                      ])
+                    };
+                  })
+                ]), 1032, ["menus", "menuFlatList", "sidebarMenus", "headerMenus", "activeMenu", "activeModuleMenu", "showHeader", "showSidebar", "showAside", "sidebarAboveHeader"]))
+              ]),
+              _: 3
+            })
+          ]),
+          _: 3
+        }, 8, ["content", "font"])
+      ], 2);
+    };
   }
 });
 export {
-  ce as default
+  _sfc_main as default
 };

package/es/components/app-layout/AppPage.vue.mjs

@@ -1,7 +1,7 @@
-import o from "./AppPage.vue2.mjs";
+import _sfc_main from "./AppPage.vue2.mjs";
 /* empty css              */
-import p from "../../_virtual/_plugin-vue_export-helper.mjs";
-const c = /* @__PURE__ */ p(o, [["__scopeId", "data-v-8fb8acc9"]]);
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
+const AppPage = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-8fb8acc9"]]);
 export {
-  c as default
+  AppPage as default
 };