jky-component-lib 0.0.67 → 0.0.72

package/dist/es/page-layout/PageLayout.vue.js

@@ -17,133 +17,304 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import { defineComponent, resolveComponent, openBlock, createElementBlock, createVNode, unref, normalizeClass, createSlots, withCtx, createBlock, renderSlot, createCommentVNode, createElementVNode, resolveDynamicComponent } from "vue";
-import { ElCard, ElScrollbar } from "element-plus";
-const _hoisted_1 = {
-  class: "jky-page-layout flex h-full w-full overflow-hidden",
-  style: { "--el-menu-border-color": "transparent" }
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
 };
+import { defineComponent, useAttrs, ref, computed, watch, openBlock, createElementBlock, normalizeClass, createBlock, unref, withCtx, createElementVNode, createVNode, createCommentVNode, normalizeStyle, resolveDynamicComponent, Transition, KeepAlive } from "vue";
+import { ElCard, ElAside, ElScrollbar } from "element-plus";
+import { cloneDeep } from "lodash-es";
+import { useRouter, useRoute, RouterView } from "vue-router";
+import _sfc_main$1 from "../menu/Menu.vue.js";
+/* empty css                */
+import _sfc_main$2 from "../tabs/Tabs.vue.js";
+/* empty css                */
+import { useTabsStore } from "../tabs/useTabsStore.js";
+const _hoisted_1 = { class: "w-full flex justify-center" };
+const _hoisted_2 = { class: "flex flex-1 min-h-0 overflow-hidden gap-3" };
 const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, {
   name: "JkyPageLayout"
 }), {
   __name: "PageLayout",
   props: {
+    showTopMenu: { type: Boolean, default: true },
+    showSideMenu: { type: Boolean, default: true },
+    asideWidth: { default: "200px" },
     asideClass: {},
     asideWithScrollbar: { type: Boolean, default: true },
     mainClass: {},
-    mainWithCard: { type: Boolean },
+    mainWithCard: { type: Boolean, default: false },
     mainWithScrollbar: { type: Boolean, default: false },
     contentClass: {},
-    navigationClass: {},
-    navigationWithScrollbar: { type: Boolean, default: true },
-    showNavigation: { type: Boolean, default: true },
-    headerClass: {},
-    tabsClass: {},
-    showDashboard: { type: Boolean },
-    dashboardWithScrollbar: { type: Boolean },
-    dashboardClass: {},
-    className: {}
+    cachable: { type: Boolean, default: true },
+    transitionName: { default: "fade" },
+    className: {},
+    tabsWithCard: { type: Boolean, default: true },
+    cardPadding: { default: "0px" },
+    topLevels: {},
+    sideLevels: {},
+    topMenuTrigger: { default: "click" },
+    topMenuSingleLevel: { type: Boolean, default: true }
   },
   setup(__props) {
     const props = __props;
+    const router = useRouter();
+    const route = useRoute();
+    const store = useTabsStore();
+    const attrs = useAttrs();
+    const activeTopMenu = ref("");
+    const activeSideMenu = ref("");
+    const routes = router.getRoutes();
+    const cacheInclude = computed(() => store.getCacheTabs());
+    watch(
+      cacheInclude,
+      (cacheTabs) => {
+        console.warn("CacheTabs changed:", cacheTabs);
+      },
+      { deep: true }
+    );
+    function buildMenuFromRoutes(routes2) {
+      const menuRoutes = routes2.filter((r) => {
+        var _a;
+        return (_a = r.meta) == null ? void 0 : _a.title;
+      });
+      const buildMenuItem = (route2, parentPath = "") => {
+        var _a, _b;
+        const fullPath = parentPath ? `${parentPath}/${route2.path}` : route2.path;
+        const normalizedPath = fullPath.startsWith("/") ? fullPath : `/${fullPath}`;
+        const item = {
+          index: normalizedPath,
+          title: ((_a = route2.meta) == null ? void 0 : _a.title) || "",
+          icon: ((_b = route2.meta) == null ? void 0 : _b.icon) || "",
+          route: normalizedPath,
+          path: normalizedPath,
+          customClass: activeTopMenu.value.startsWith(normalizedPath) ? "is-active jky-page-layout__active-top-menu" : ""
+        };
+        if (route2.children && route2.children.length > 0) {
+          item.children = route2.children.filter((child) => {
+            var _a2;
+            return (_a2 = child.meta) == null ? void 0 : _a2.title;
+          }).map((child) => buildMenuItem(child, normalizedPath));
+        }
+        return item;
+      };
+      return menuRoutes.filter((route2) => {
+        const pathSegments = route2.path.split("/").filter(Boolean);
+        return pathSegments.length === 1;
+      }).map((route2) => buildMenuItem(route2));
+    }
+    const menuData = computed(() => {
+      return buildMenuFromRoutes(routes);
+    });
+    const topMenuData = computed(() => {
+      console.warn("topMenuData:", menuData.value, props, attrs);
+      if (props.topMenuSingleLevel) {
+        return cloneDeep(menuData.value).map((item) => {
+          const _a = item, { children } = _a, rest = __objRest(_a, ["children"]);
+          return rest;
+        });
+      }
+      return menuData.value;
+    });
+    const displayedSideMenu = computed(() => {
+      if (menuData.value.length === 0) {
+        console.warn("displayedSideMenu: menuData is empty");
+        return [];
+      }
+      const topMenuItem = route.matched[0];
+      if (!topMenuItem) {
+        console.warn("displayedSideMenu: topMenuItem is empty");
+        return [];
+      }
+      const found = menuData.value.find((item) => item.path === topMenuItem.path);
+      if (!found) {
+        console.warn("displayedSideMenu: found not found", topMenuItem);
+        return [];
+      }
+      if ((found == null ? void 0 : found.children) && found.children.length > 0) {
+        return found.children;
+      }
+      return [];
+    });
+    const computedAsideWidth = computed(() => {
+      if (props.showSideMenu && displayedSideMenu.value.length > 0) {
+        return props.asideWidth;
+      }
+      return "0";
+    });
+    watch(
+      () => route.path,
+      () => {
+        const routePath = route.path;
+        const matchedMenus = route.matched.filter((r) => {
+          var _a;
+          return (_a = r.meta) == null ? void 0 : _a.title;
+        });
+        if (matchedMenus.length === 0) {
+          console.warn("No matching menu item found for route:", routePath);
+          return;
+        }
+        activeSideMenu.value = routePath;
+        if (matchedMenus.length >= 2) {
+          activeTopMenu.value = matchedMenus[matchedMenus.length - 2].path;
+        } else {
+          activeTopMenu.value = matchedMenus[0].path;
+        }
+        console.warn("Updated menu:", {
+          activeTopMenu: activeTopMenu.value,
+          activeSideMenu: activeSideMenu.value
+        });
+      },
+      { immediate: true }
+    );
+    function handleMenuOpen(index) {
+      console.warn("handleMenuOpen called with index:", index);
+    }
+    function handleMenuSelect(index) {
+      router.push(index);
+    }
     return (_ctx, _cache) => {
-      const _component_ElAutoResizer = resolveComponent("ElAutoResizer");
-      return openBlock(), createElementBlock("div", _hoisted_1, [
-        createVNode(unref(ElCard), {
-          class: normalizeClass(["jky-page-layout__aside shrink-0 overflow-hidden p-0", props.asideClass]),
-          style: { "--el-card-padding": 0 }
-        }, createSlots({
-          default: withCtx(() => [
-            props.asideWithScrollbar ? (openBlock(), createBlock(unref(ElScrollbar), { key: 0 }, {
-              default: withCtx(() => [
-                renderSlot(_ctx.$slots, "aside")
-              ]),
-              _: 3
-            })) : renderSlot(_ctx.$slots, "aside", { key: 1 })
-          ]),
-          _: 2
-        }, [
-          _ctx.$slots.menuHeader ? {
-            name: "header",
-            fn: withCtx(() => [
-              renderSlot(_ctx.$slots, "menuHeader")
-            ]),
-            key: "0"
-          } : void 0
-        ]), 1032, ["class"]),
-        __props.showNavigation ? (openBlock(), createBlock(unref(ElCard), {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["jky-page-layout flex h-full w-full flex-col overflow-hidden gap-3", props.className])
+      }, [
+        props.showTopMenu && menuData.value.length > 0 ? (openBlock(), createBlock(unref(ElCard), {
           key: 0,
-          class: normalizeClass(["jky-page-layout__navigation shrink-0 overflow-hidden p-0", props.navigationClass]),
+          class: "jky-page-layout__top-menu shrink-0 overflow-hidden p-0",
           style: { "--el-card-padding": 0 }
-        }, createSlots({
+        }, {
           default: withCtx(() => [
-            props.navigationWithScrollbar ? (openBlock(), createBlock(unref(ElScrollbar), { key: 0 }, {
-              default: withCtx(() => [
-                renderSlot(_ctx.$slots, "navigation")
-              ]),
-              _: 3
-            })) : renderSlot(_ctx.$slots, "navigation", { key: 1 })
+            createElementVNode("div", _hoisted_1, [
+              createVNode(_sfc_main$1, {
+                mode: "horizontal",
+                "default-active": activeTopMenu.value,
+                "menu-data": topMenuData.value,
+                "menu-trigger": props.topMenuTrigger,
+                router: false,
+                levels: props.topLevels,
+                onSelect: handleMenuSelect,
+                onOpen: handleMenuOpen
+              }, null, 8, ["default-active", "menu-data", "menu-trigger", "levels"])
+            ])
           ]),
-          _: 2
-        }, [
-          _ctx.$slots.navigationHeader ? {
-            name: "header",
-            fn: withCtx(() => [
-              renderSlot(_ctx.$slots, "navigationHeader")
-            ]),
-            key: "0"
-          } : void 0
-        ]), 1032, ["class"])) : createCommentVNode("", true),
-        createElementVNode("div", {
-          class: normalizeClass(["jky-page-layout__main flex-1 flex flex-col min-w-0 overflow-hidden p-0 gap-y-4", props.mainClass])
-        }, [
-          _ctx.$slots.header ? (openBlock(), createElementBlock("div", {
-            key: 0,
-            class: normalizeClass(["jky-page-layout__header shrink-0 flex items-center overflow-hidden px-4", props.headerClass])
-          }, [
-            renderSlot(_ctx.$slots, "header")
-          ], 2)) : createCommentVNode("", true),
-          _ctx.$slots.tabs ? (openBlock(), createElementBlock("div", {
-            key: 1,
-            class: normalizeClass(["jky-page-layout__tabs shrink-0 overflow-hidden", props.tabsClass])
-          }, [
-            renderSlot(_ctx.$slots, "tabs")
-          ], 2)) : createCommentVNode("", true),
-          _ctx.$slots.dashboard ? (openBlock(), createBlock(unref(ElCard), {
-            key: 2,
-            class: normalizeClass(["jky-page-layout__dashboard shrink-0 overflow-hidden", props.dashboardClass])
+          _: 1
+        })) : createCommentVNode("", true),
+        createElementVNode("div", _hoisted_2, [
+          createVNode(unref(ElAside), {
+            class: "shrink-0 overflow-hidden h-full",
+            style: normalizeStyle({ "--el-aside-width": computedAsideWidth.value })
           }, {
             default: withCtx(() => [
-              props.dashboardWithScrollbar ? (openBlock(), createBlock(unref(ElScrollbar), { key: 0 }, {
+              props.showSideMenu && displayedSideMenu.value.length > 0 ? (openBlock(), createBlock(unref(ElCard), {
+                key: 0,
+                class: "h-full",
+                style: normalizeStyle({ "--el-card-padding": props.cardPadding })
+              }, {
                 default: withCtx(() => [
-                  renderSlot(_ctx.$slots, "dashboard")
+                  props.asideWithScrollbar ? (openBlock(), createBlock(unref(ElScrollbar), { key: 0 }, {
+                    default: withCtx(() => [
+                      createVNode(_sfc_main$1, {
+                        mode: "vertical",
+                        "default-active": activeSideMenu.value,
+                        "menu-data": displayedSideMenu.value,
+                        onSelect: handleMenuSelect
+                      }, null, 8, ["default-active", "menu-data"])
+                    ]),
+                    _: 1
+                  })) : createCommentVNode("", true),
+                  createVNode(_sfc_main$1, {
+                    mode: "vertical",
+                    "default-active": activeSideMenu.value,
+                    "menu-data": displayedSideMenu.value,
+                    onSelect: handleMenuSelect
+                  }, null, 8, ["default-active", "menu-data"])
                 ]),
-                _: 3
-              })) : renderSlot(_ctx.$slots, "dashboard", { key: 1 })
+                _: 1
+              }, 8, ["style"])) : createCommentVNode("", true)
             ]),
-            _: 3
-          }, 8, ["class"])) : createCommentVNode("", true),
-          (openBlock(), createBlock(resolveDynamicComponent(props.mainWithCard ? unref(ElCard) : "div"), {
-            "body-class": props.mainWithScrollbar ? "" : "pb-0!",
-            class: normalizeClass(["jky-page-layout__content flex-1 min-h-0 overflow-hidden", props.contentClass])
-          }, {
-            default: withCtx(() => [
-              props.mainWithScrollbar ? (openBlock(), createBlock(unref(ElScrollbar), { key: 0 }, {
-                default: withCtx(() => [
-                  renderSlot(_ctx.$slots, "default")
-                ]),
-                _: 3
-              })) : (openBlock(), createBlock(_component_ElAutoResizer, { key: 1 }, {
-                default: withCtx(({ height }) => [
-                  renderSlot(_ctx.$slots, "default", { height })
-                ]),
-                _: 3
-              }))
-            ]),
-            _: 3
-          }, 8, ["body-class", "class"]))
-        ], 2)
-      ]);
+            _: 1
+          }, 8, ["style"]),
+          createElementVNode("div", {
+            class: normalizeClass(["jky-page-layout__main flex-1 flex flex-col min-w-0 overflow-hidden", props.mainClass])
+          }, [
+            props.tabsWithCard ? (openBlock(), createBlock(unref(ElCard), {
+              key: 0,
+              class: "jky-page-layout__tabs shrink-0",
+              style: normalizeStyle({ "--el-card-padding": props.cardPadding })
+            }, {
+              default: withCtx(() => [
+                createVNode(_sfc_main$2, {
+                  mode: "route",
+                  cachable: props.cachable
+                }, null, 8, ["cachable"])
+              ]),
+              _: 1
+            }, 8, ["style"])) : (openBlock(), createBlock(_sfc_main$2, {
+              key: 1,
+              class: "jky-page-layout__tabs shrink-0",
+              mode: "route",
+              cachable: props.cachable
+            }, null, 8, ["cachable"])),
+            (openBlock(), createBlock(resolveDynamicComponent(props.mainWithCard ? unref(ElCard) : "div"), {
+              class: normalizeClass(["jky-page-layout__content flex-1 min-h-0 overflow-hidden", props.contentClass]),
+              "body-class": props.mainWithScrollbar ? "" : "pb-0!"
+            }, {
+              default: withCtx(() => [
+                props.mainWithScrollbar ? (openBlock(), createBlock(unref(ElScrollbar), { key: 0 }, {
+                  default: withCtx(() => [
+                    createVNode(unref(RouterView), null, {
+                      default: withCtx(({ Component, route: currentRoute }) => [
+                        createVNode(Transition, {
+                          name: props.transitionName
+                        }, {
+                          default: withCtx(() => [
+                            (openBlock(), createBlock(KeepAlive, {
+                              include: props.cachable ? cacheInclude.value : []
+                            }, [
+                              (openBlock(), createBlock(resolveDynamicComponent(Component), {
+                                key: currentRoute.name
+                              }))
+                            ], 1032, ["include"]))
+                          ]),
+                          _: 2
+                        }, 1032, ["name"])
+                      ]),
+                      _: 1
+                    })
+                  ]),
+                  _: 1
+                })) : (openBlock(), createBlock(unref(RouterView), { key: 1 }, {
+                  default: withCtx(({ Component, route: currentRoute }) => [
+                    createVNode(Transition, {
+                      name: props.transitionName
+                    }, {
+                      default: withCtx(() => [
+                        (openBlock(), createBlock(KeepAlive, {
+                          include: props.cachable ? cacheInclude.value : []
+                        }, [
+                          (openBlock(), createBlock(resolveDynamicComponent(Component), {
+                            key: currentRoute.name
+                          }))
+                        ], 1032, ["include"]))
+                      ]),
+                      _: 2
+                    }, 1032, ["name"])
+                  ]),
+                  _: 1
+                }))
+              ]),
+              _: 1
+            }, 8, ["class", "body-class"]))
+          ], 2)
+        ])
+      ], 2);
     };
   }
 }));

package/dist/es/page-layout/style.css

@@ -7,4 +7,63 @@
 .el-menu {
     border-right: none;
 }
+
+  /* 顶部激活菜单项的自定义样式 */
+.jky-page-layout__active-top-menu {
+    /* 这里可以添加自定义样式，例如： */
+    /* background-color: var(--el-color-primary-light-9); */
+    /* color: var(--el-color-primary); */
+}
+}
+
+/* 淡入淡出动画 */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+/* 缩放动画 */
+.zoom-enter-active,
+.zoom-leave-active {
+  transition:
+    opacity 0.3s ease,
+    transform 0.3s ease;
+}
+.zoom-enter-from {
+  opacity: 0;
+  transform: scale(0.95);
+}
+.zoom-leave-to {
+  opacity: 0;
+  transform: scale(1.05);
+}
+
+/* 滑动动画 */
+.slide-left-enter-active,
+.slide-left-leave-active,
+.slide-right-enter-active,
+.slide-right-leave-active {
+  transition:
+    opacity 0.3s ease,
+    transform 0.3s ease;
+}
+.slide-left-enter-from {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+.slide-left-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+.slide-right-enter-from {
+  opacity: 0;
+  transform: translateX(30px);
+}
+.slide-right-leave-to {
+  opacity: 0;
+  transform: translateX(-30px);
 }