jky-component-lib 0.0.65 → 0.0.72

package/dist/lib/menu/MenuItem.vue.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+const ElementPlus = require("element-plus");
+const _hoisted_1 = {
+  key: 1,
+  class: "jky-menu-item__title"
+};
+const _hoisted_2 = {
+  key: 1,
+  class: "jky-menu-item__title"
+};
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "MenuItem",
+  props: {
+    item: {},
+    levels: {}
+  },
+  setup(__props) {
+    const props = __props;
+    return (_ctx, _cache) => {
+      var _a, _b;
+      const _component_MenuItem = vue.resolveComponent("MenuItem", true);
+      return props.item.children && props.item.children.length > 0 ? (vue.openBlock(), vue.createBlock(vue.unref(ElementPlus.ElSubMenu), {
+        key: 0,
+        index: props.item.index || "",
+        class: vue.normalizeClass(props.item.customClass),
+        disabled: (_a = props.item.disabled) != null ? _a : false,
+        "popper-offset": props.item.popperOffset
+      }, {
+        title: vue.withCtx(() => [
+          props.item.icon ? (vue.openBlock(), vue.createElementBlock("span", {
+            key: 0,
+            class: vue.normalizeClass([props.item.icon, "jky-menu-item__icon"])
+          }, null, 2)) : vue.createCommentVNode("", true),
+          props.item.title ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1, vue.toDisplayString(props.item.title), 1)) : vue.createCommentVNode("", true)
+        ]),
+        default: vue.withCtx(() => [
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(props.item.children, (child) => {
+            return vue.openBlock(), vue.createBlock(_component_MenuItem, {
+              key: child.index,
+              item: child,
+              levels: props.levels !== void 0 && props.levels > 0 ? props.levels - 1 : 0
+            }, null, 8, ["item", "levels"]);
+          }), 128))
+        ]),
+        _: 1
+      }, 8, ["index", "class", "disabled", "popper-offset"])) : (vue.openBlock(), vue.createBlock(vue.unref(ElementPlus.ElMenuItem), {
+        key: 1,
+        index: props.item.index || "",
+        class: vue.normalizeClass(props.item.customClass),
+        disabled: (_b = props.item.disabled) != null ? _b : false,
+        route: props.item.route
+      }, {
+        default: vue.withCtx(() => [
+          props.item.icon ? (vue.openBlock(), vue.createElementBlock("span", {
+            key: 0,
+            class: vue.normalizeClass([props.item.icon, "jky-menu-item__icon"])
+          }, null, 2)) : vue.createCommentVNode("", true),
+          props.item.title ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2, vue.toDisplayString(props.item.title), 1)) : vue.createCommentVNode("", true)
+        ]),
+        _: 1
+      }, 8, ["index", "class", "disabled", "route"]));
+    };
+  }
+});
+exports.default = _sfc_main;

package/dist/lib/menu/MenuItem.vue2.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const MenuItem_vue_vue_type_script_setup_true_lang = require("./MenuItem.vue.js");
+exports.default = MenuItem_vue_vue_type_script_setup_true_lang.default;

package/dist/lib/menu/style.css

@@ -42,7 +42,8 @@ li + li {
 }
 
 /* 4. 菜单项图标样式 */
-.jky-menu-item__icon {
+
+/* .jky-menu-item__icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -51,7 +52,7 @@ li + li {
   margin-right: var(--jky-menu-icon-margin);
   font-size: var(--jky-menu-icon-size);
   flex-shrink: 0;
-}
+} */
 
 /* 5. 菜单项标题样式 */
 .jky-menu-item__title {

package/dist/lib/package.json.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const version = "0.0.65";
+const version = "0.0.72";
 exports.version = version;

package/dist/lib/page-header/PageHeader.vue.js

@@ -76,13 +76,13 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadValu
     function handleCommand(command) {
       emit("command", command);
     }
-    const heightValue = computed(() => {
+    const heightValue = vue.computed(() => {
       if (typeof props.height === "number") {
         return `${props.height}px`;
       }
       return props.height;
     });
-    const backgroundStyle = computed(() => {
+    const backgroundStyle = vue.computed(() => {
       const style = {};
       if (props.backgroundImage) {
         style.backgroundImage = `url(${props.backgroundImage})`;
@@ -98,7 +98,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadValu
       var _a, _b, _c, _d;
       return vue.openBlock(), vue.createElementBlock("header", {
         class: "jky-page-header",
-        style: vue.normalizeStyle([vue.unref(backgroundStyle), { height: vue.unref(heightValue) }])
+        style: vue.normalizeStyle([backgroundStyle.value, { height: heightValue.value }])
       }, [
         vue.createElementVNode("div", _hoisted_1, [
           __props.showPopover && ((_b = (_a = __props.popover) == null ? void 0 : _a.menus) == null ? void 0 : _b.length) ? (vue.openBlock(), vue.createBlock(PopoverMenu_vue_vue_type_script_setup_true_lang.default, vue.normalizeProps(vue.mergeProps({ key: 0 }, __props.popover)), null, 16)) : vue.createCommentVNode("", true),

package/dist/lib/page-header/PopoverMenu.vue.js

@@ -29,7 +29,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   },
   setup(__props) {
     const props = __props;
-    const popoverIndex = ref("");
+    const popoverIndex = vue.ref("");
     function onPopoverButtonClick(item) {
       var _a;
       if (props.highlightCurrent) {
@@ -61,7 +61,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                   key: item.value,
                   disabled: item.disabled,
                   class: vue.normalizeClass(["w-fit! h-fit! ml-0!", [__props.elButtonClass, item.elButtonClass]]),
-                  type: vue.unref(popoverIndex) === item.value ? "primary" : __props.elButtonType || "default",
+                  type: popoverIndex.value === item.value ? "primary" : __props.elButtonType || "default",
                   onClick: ($event) => onPopoverButtonClick(item)
                 }, {
                   default: vue.withCtx(() => [

package/dist/lib/page-layout/PageLayout.vue.d.ts

@@ -1,36 +1,16 @@
 import { PageLayoutProps } from './types';
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        menuHeader?(_: {}): any;
-        aside?(_: {}): any;
-        aside?(_: {}): any;
-        navigationHeader?(_: {}): any;
-        navigation?(_: {}): any;
-        navigation?(_: {}): any;
-        header?(_: {}): any;
-        tabs?(_: {}): any;
-        dashboard?(_: {}): any;
-        dashboard?(_: {}): any;
-        default?(_: {}): any;
-        default?(_: {
-            height: any;
-        }): any;
-    };
-    refs: {};
-    rootEl: HTMLDivElement;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<PageLayoutProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<PageLayoutProps> & Readonly<{}>, {
+declare const _default: import('vue').DefineComponent<PageLayoutProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<PageLayoutProps> & Readonly<{}>, {
+    cachable: boolean;
+    showTopMenu: boolean;
+    showSideMenu: boolean;
+    asideWidth: string;
     asideWithScrollbar: boolean;
+    mainWithCard: boolean;
     mainWithScrollbar: boolean;
-    navigationWithScrollbar: boolean;
-    showNavigation: boolean;
+    transitionName: string;
+    tabsWithCard: boolean;
+    cardPadding: string;
+    topMenuTrigger: "hover" | "click";
+    topMenuSingleLevel: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

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

@@ -18,134 +18,305 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+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;
+};
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const vue = require("vue");
 const ElementPlus = require("element-plus");
-const _hoisted_1 = {
-  class: "jky-page-layout flex h-full w-full overflow-hidden",
-  style: { "--el-menu-border-color": "transparent" }
-};
+const lodashEs = require("lodash-es");
+const vueRouter = require("vue-router");
+const Menu_vue_vue_type_script_setup_true_lang = require("../menu/Menu.vue.js");
+;/* empty css                 */
+const Tabs_vue_vue_type_script_setup_true_lang = require("../tabs/Tabs.vue.js");
+;/* empty css                 */
+const useTabsStore = require("../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__ */ vue.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 = vueRouter.useRouter();
+    const route = vueRouter.useRoute();
+    const store = useTabsStore.useTabsStore();
+    const attrs = vue.useAttrs();
+    const activeTopMenu = vue.ref("");
+    const activeSideMenu = vue.ref("");
+    const routes = router.getRoutes();
+    const cacheInclude = vue.computed(() => store.getCacheTabs());
+    vue.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 = vue.computed(() => {
+      return buildMenuFromRoutes(routes);
+    });
+    const topMenuData = vue.computed(() => {
+      console.warn("topMenuData:", menuData.value, props, attrs);
+      if (props.topMenuSingleLevel) {
+        return lodashEs.cloneDeep(menuData.value).map((item) => {
+          const _a = item, { children } = _a, rest = __objRest(_a, ["children"]);
+          return rest;
+        });
+      }
+      return menuData.value;
+    });
+    const displayedSideMenu = vue.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 = vue.computed(() => {
+      if (props.showSideMenu && displayedSideMenu.value.length > 0) {
+        return props.asideWidth;
+      }
+      return "0";
+    });
+    vue.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 = vue.resolveComponent("ElAutoResizer");
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
-        vue.createVNode(vue.unref(ElementPlus.ElCard), {
-          class: vue.normalizeClass(["jky-page-layout__aside shrink-0 overflow-hidden p-0", props.asideClass]),
-          style: { "--el-card-padding": 0 }
-        }, vue.createSlots({
-          default: vue.withCtx(() => [
-            props.asideWithScrollbar ? (vue.openBlock(), vue.createBlock(vue.unref(ElementPlus.ElScrollbar), { key: 0 }, {
-              default: vue.withCtx(() => [
-                vue.renderSlot(_ctx.$slots, "aside")
-              ]),
-              _: 3
-            })) : vue.renderSlot(_ctx.$slots, "aside", { key: 1 })
-          ]),
-          _: 2
-        }, [
-          _ctx.$slots.menuHeader ? {
-            name: "header",
-            fn: vue.withCtx(() => [
-              vue.renderSlot(_ctx.$slots, "menuHeader")
-            ]),
-            key: "0"
-          } : void 0
-        ]), 1032, ["class"]),
-        __props.showNavigation ? (vue.openBlock(), vue.createBlock(vue.unref(ElementPlus.ElCard), {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        class: vue.normalizeClass(["jky-page-layout flex h-full w-full flex-col overflow-hidden gap-3", props.className])
+      }, [
+        props.showTopMenu && menuData.value.length > 0 ? (vue.openBlock(), vue.createBlock(vue.unref(ElementPlus.ElCard), {
           key: 0,
-          class: vue.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 }
-        }, vue.createSlots({
+        }, {
           default: vue.withCtx(() => [
-            props.navigationWithScrollbar ? (vue.openBlock(), vue.createBlock(vue.unref(ElementPlus.ElScrollbar), { key: 0 }, {
-              default: vue.withCtx(() => [
-                vue.renderSlot(_ctx.$slots, "navigation")
-              ]),
-              _: 3
-            })) : vue.renderSlot(_ctx.$slots, "navigation", { key: 1 })
+            vue.createElementVNode("div", _hoisted_1, [
+              vue.createVNode(Menu_vue_vue_type_script_setup_true_lang.default, {
+                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: vue.withCtx(() => [
-              vue.renderSlot(_ctx.$slots, "navigationHeader")
-            ]),
-            key: "0"
-          } : void 0
-        ]), 1032, ["class"])) : vue.createCommentVNode("", true),
-        vue.createElementVNode("div", {
-          class: vue.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 ? (vue.openBlock(), vue.createElementBlock("div", {
-            key: 0,
-            class: vue.normalizeClass(["jky-page-layout__header shrink-0 flex items-center overflow-hidden px-4", props.headerClass])
-          }, [
-            vue.renderSlot(_ctx.$slots, "header")
-          ], 2)) : vue.createCommentVNode("", true),
-          _ctx.$slots.tabs ? (vue.openBlock(), vue.createElementBlock("div", {
-            key: 1,
-            class: vue.normalizeClass(["jky-page-layout__tabs shrink-0 overflow-hidden", props.tabsClass])
-          }, [
-            vue.renderSlot(_ctx.$slots, "tabs")
-          ], 2)) : vue.createCommentVNode("", true),
-          _ctx.$slots.dashboard ? (vue.openBlock(), vue.createBlock(vue.unref(ElementPlus.ElCard), {
-            key: 2,
-            class: vue.normalizeClass(["jky-page-layout__dashboard shrink-0 overflow-hidden", props.dashboardClass])
-          }, {
-            default: vue.withCtx(() => [
-              props.dashboardWithScrollbar ? (vue.openBlock(), vue.createBlock(vue.unref(ElementPlus.ElScrollbar), { key: 0 }, {
-                default: vue.withCtx(() => [
-                  vue.renderSlot(_ctx.$slots, "dashboard")
-                ]),
-                _: 3
-              })) : vue.renderSlot(_ctx.$slots, "dashboard", { key: 1 })
-            ]),
-            _: 3
-          }, 8, ["class"])) : vue.createCommentVNode("", true),
-          (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(props.mainWithCard ? vue.unref(ElementPlus.ElCard) : "div"), {
-            "body-class": props.mainWithScrollbar ? "" : "pb-0!",
-            class: vue.normalizeClass(["jky-page-layout__content flex-1 min-h-0 overflow-hidden", props.contentClass])
+          _: 1
+        })) : vue.createCommentVNode("", true),
+        vue.createElementVNode("div", _hoisted_2, [
+          vue.createVNode(vue.unref(ElementPlus.ElAside), {
+            class: "shrink-0 overflow-hidden h-full",
+            style: vue.normalizeStyle({ "--el-aside-width": computedAsideWidth.value })
           }, {
             default: vue.withCtx(() => [
-              props.mainWithScrollbar ? (vue.openBlock(), vue.createBlock(vue.unref(ElementPlus.ElScrollbar), { key: 0 }, {
+              props.showSideMenu && displayedSideMenu.value.length > 0 ? (vue.openBlock(), vue.createBlock(vue.unref(ElementPlus.ElCard), {
+                key: 0,
+                class: "h-full",
+                style: vue.normalizeStyle({ "--el-card-padding": props.cardPadding })
+              }, {
                 default: vue.withCtx(() => [
-                  vue.renderSlot(_ctx.$slots, "default")
-                ]),
-                _: 3
-              })) : (vue.openBlock(), vue.createBlock(_component_ElAutoResizer, { key: 1 }, {
-                default: vue.withCtx(({ height }) => [
-                  vue.renderSlot(_ctx.$slots, "default", { height })
+                  props.asideWithScrollbar ? (vue.openBlock(), vue.createBlock(vue.unref(ElementPlus.ElScrollbar), { key: 0 }, {
+                    default: vue.withCtx(() => [
+                      vue.createVNode(Menu_vue_vue_type_script_setup_true_lang.default, {
+                        mode: "vertical",
+                        "default-active": activeSideMenu.value,
+                        "menu-data": displayedSideMenu.value,
+                        onSelect: handleMenuSelect
+                      }, null, 8, ["default-active", "menu-data"])
+                    ]),
+                    _: 1
+                  })) : vue.createCommentVNode("", true),
+                  vue.createVNode(Menu_vue_vue_type_script_setup_true_lang.default, {
+                    mode: "vertical",
+                    "default-active": activeSideMenu.value,
+                    "menu-data": displayedSideMenu.value,
+                    onSelect: handleMenuSelect
+                  }, null, 8, ["default-active", "menu-data"])
                 ]),
-                _: 3
-              }))
+                _: 1
+              }, 8, ["style"])) : vue.createCommentVNode("", true)
             ]),
-            _: 3
-          }, 8, ["body-class", "class"]))
-        ], 2)
-      ]);
+            _: 1
+          }, 8, ["style"]),
+          vue.createElementVNode("div", {
+            class: vue.normalizeClass(["jky-page-layout__main flex-1 flex flex-col min-w-0 overflow-hidden", props.mainClass])
+          }, [
+            props.tabsWithCard ? (vue.openBlock(), vue.createBlock(vue.unref(ElementPlus.ElCard), {
+              key: 0,
+              class: "jky-page-layout__tabs shrink-0",
+              style: vue.normalizeStyle({ "--el-card-padding": props.cardPadding })
+            }, {
+              default: vue.withCtx(() => [
+                vue.createVNode(Tabs_vue_vue_type_script_setup_true_lang.default, {
+                  mode: "route",
+                  cachable: props.cachable
+                }, null, 8, ["cachable"])
+              ]),
+              _: 1
+            }, 8, ["style"])) : (vue.openBlock(), vue.createBlock(Tabs_vue_vue_type_script_setup_true_lang.default, {
+              key: 1,
+              class: "jky-page-layout__tabs shrink-0",
+              mode: "route",
+              cachable: props.cachable
+            }, null, 8, ["cachable"])),
+            (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(props.mainWithCard ? vue.unref(ElementPlus.ElCard) : "div"), {
+              class: vue.normalizeClass(["jky-page-layout__content flex-1 min-h-0 overflow-hidden", props.contentClass]),
+              "body-class": props.mainWithScrollbar ? "" : "pb-0!"
+            }, {
+              default: vue.withCtx(() => [
+                props.mainWithScrollbar ? (vue.openBlock(), vue.createBlock(vue.unref(ElementPlus.ElScrollbar), { key: 0 }, {
+                  default: vue.withCtx(() => [
+                    vue.createVNode(vue.unref(vueRouter.RouterView), null, {
+                      default: vue.withCtx(({ Component, route: currentRoute }) => [
+                        vue.createVNode(vue.Transition, {
+                          name: props.transitionName
+                        }, {
+                          default: vue.withCtx(() => [
+                            (vue.openBlock(), vue.createBlock(vue.KeepAlive, {
+                              include: props.cachable ? cacheInclude.value : []
+                            }, [
+                              (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(Component), {
+                                key: currentRoute.name
+                              }))
+                            ], 1032, ["include"]))
+                          ]),
+                          _: 2
+                        }, 1032, ["name"])
+                      ]),
+                      _: 1
+                    })
+                  ]),
+                  _: 1
+                })) : (vue.openBlock(), vue.createBlock(vue.unref(vueRouter.RouterView), { key: 1 }, {
+                  default: vue.withCtx(({ Component, route: currentRoute }) => [
+                    vue.createVNode(vue.Transition, {
+                      name: props.transitionName
+                    }, {
+                      default: vue.withCtx(() => [
+                        (vue.openBlock(), vue.createBlock(vue.KeepAlive, {
+                          include: props.cachable ? cacheInclude.value : []
+                        }, [
+                          (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(Component), {
+                            key: currentRoute.name
+                          }))
+                        ], 1032, ["include"]))
+                      ]),
+                      _: 2
+                    }, 1032, ["name"])
+                  ]),
+                  _: 1
+                }))
+              ]),
+              _: 1
+            }, 8, ["class", "body-class"]))
+          ], 2)
+        ])
+      ], 2);
     };
   }
 }));

package/dist/lib/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);
 }