@keyblade/pro-components 0.0.5 → 0.0.6

package/es/pro-layout/hooks.d.ts

@@ -4,13 +4,13 @@ export declare function useHooks(menuItems: Ref<IProMenuItem[]>, options: {
     tabsMode: boolean;
 }): {
     menuSelectedKeys: Ref<string[]>;
-    menuOpenKeys: Ref<string[]>;
     onMenuItemClick: (key: string) => void;
-    onSubMenuClick: (key: string, openKeys: string[]) => void;
     activeMenuItem: Ref<IProMenuItem | undefined>;
+    menuItemMap: Ref<Record<string, IProMenuItem>>;
     breadcrumbItems: Ref<string[]>;
     tabs: Ref<{
         name: string;
+        parentNames: string[];
         title: string;
         fullPath: string;
         active: boolean;

package/es/pro-layout/hooks.js

@@ -4,44 +4,42 @@ function useHooks(menuItems, options) {
   const route = useRoute();
   const router = useRouter();
   const menuSelectedKeys = ref([]);
-  const menuOpenKeys = ref([]);
   const onMenuItemClick = (key) => {
     menuSelectedKeys.value = [key];
   };
-  const onSubMenuClick = (key, openKeys) => {
-    menuOpenKeys.value = openKeys;
-  };
   const activeMenuItem = ref();
+  const activeMenuItemPaths = ref([]);
   const menuItemMap = ref({});
   const breadcrumbItems = ref([]);
   const tabs = ref([]);
-  const setBreadcrumbItems = () => {
-    var _a, _b;
-    const menuItemPaths = [];
-    const recursion = (_menuItem) => {
-      var _a2;
-      let find = false;
-      for (const i in _menuItem) {
-        if (_menuItem[i].name === ((_a2 = activeMenuItem == null ? void 0 : activeMenuItem.value) == null ? void 0 : _a2.name)) {
-          find = true;
-          menuItemPaths.push(_menuItem[i]);
+  const setActiveMenuItemPaths = () => {
+    const paths = [];
+    const recursion = (_menuItems) => {
+      var _a;
+      for (const i in _menuItems) {
+        const menuItem = _menuItems[i];
+        if (menuItem.name === ((_a = activeMenuItem == null ? void 0 : activeMenuItem.value) == null ? void 0 : _a.name)) {
+          delete menuItem.children;
+          paths.unshift(menuItem);
+          return true;
         }
-        const children = _menuItem[i].children;
-        if (children) {
-          const node = recursion(children);
-          if (node) {
-            menuItemPaths.push(_menuItem[i]);
+        if (menuItem.children && menuItem.children.length > 0) {
+          const ok = recursion(menuItem.children);
+          if (ok) {
+            delete menuItem.children;
+            paths.unshift(menuItem);
+            return true;
           }
         }
       }
-      return find;
+      return false;
     };
-    recursion(menuItems.value);
-    const activeMenuItemPaths = menuItemPaths.reverse();
-    const parentMenuPaths = activeMenuItemPaths.filter((_, i) => i !== activeMenuItemPaths.length - 1);
-    const keySet = /* @__PURE__ */ new Set([...parentMenuPaths.map((v) => v.name), ...menuOpenKeys.value]);
-    menuOpenKeys.value = [...keySet];
-    const activeMenuItemTitles = activeMenuItemPaths.map((v) => v.title);
+    recursion(JSON.parse(JSON.stringify(menuItems.value)));
+    activeMenuItemPaths.value = paths;
+  };
+  const setBreadcrumbItems = () => {
+    var _a, _b;
+    const activeMenuItemTitles = activeMenuItemPaths.value.map((v) => v.title);
     breadcrumbItems.value = ((_a = activeMenuItem.value) == null ? void 0 : _a.breadcrumbs) ? (_b = activeMenuItem.value) == null ? void 0 : _b.breadcrumbs : activeMenuItemTitles.length !== 0 ? activeMenuItemTitles : [];
   };
   function setTabs() {
@@ -64,6 +62,7 @@ function useHooks(menuItems, options) {
     });
     const newTab = {
       name: menuItemName,
+      parentNames: activeMenuItemPaths.value.map((v) => v.name),
       title: menuItemTitle ?? menuItemName,
       fullPath: route.fullPath,
       active: true
@@ -129,6 +128,7 @@ function useHooks(menuItems, options) {
     const routeName = route == null ? void 0 : route.name;
     activeMenuItem.value = menuItemMap.value[routeName];
     menuSelectedKeys.value = (activeMenuItem == null ? void 0 : activeMenuItem.value) ? [activeMenuItem.value.name] : [];
+    setActiveMenuItemPaths();
     setBreadcrumbItems();
     if (options.tabsMode) {
       setTabs();
@@ -136,10 +136,9 @@ function useHooks(menuItems, options) {
   }, { immediate: true });
   return {
     menuSelectedKeys,
-    menuOpenKeys,
     onMenuItemClick,
-    onSubMenuClick,
     activeMenuItem,
+    menuItemMap,
     breadcrumbItems,
     tabs,
     onTabClick,

package/es/pro-layout/index.d.ts

@@ -111,13 +111,13 @@ declare const ProLayout: {
                 [name: string]: Slot | undefined;
             }>;
             menuSelectedKeys: Ref<string[]>;
-            menuOpenKeys: Ref<string[]>;
             onMenuItemClick: (key: string) => void;
-            onSubMenuClick: (key: string, openKeys: string[]) => void;
             activeMenuItem: Ref<IProMenuItem | undefined>;
+            menuItemMap: Ref<Record<string, IProMenuItem>>;
             breadcrumbItems: Ref<string[]>;
             tabs: Ref<{
                 name: string;
+                parentNames: string[];
                 title: string;
                 fullPath: string;
                 active: boolean;
@@ -125,6 +125,8 @@ declare const ProLayout: {
             onTabClick: (key: string) => void;
             onTabDelete: (key: string) => void;
             keepAliveKeys: ComputedRef<string[]>;
+            headerHeight: number;
+            headerHeightWidthPx: string;
             siderWidth: number;
             siderCollapsedWidth: number;
             siderWidthPx: string;
@@ -208,13 +210,13 @@ declare const ProLayout: {
             [name: string]: Slot | undefined;
         }>;
         menuSelectedKeys: Ref<string[]>;
-        menuOpenKeys: Ref<string[]>;
         onMenuItemClick: (key: string) => void;
-        onSubMenuClick: (key: string, openKeys: string[]) => void;
         activeMenuItem: Ref<IProMenuItem | undefined>;
+        menuItemMap: Ref<Record<string, IProMenuItem>>;
         breadcrumbItems: Ref<string[]>;
         tabs: Ref<{
             name: string;
+            parentNames: string[];
             title: string;
             fullPath: string;
             active: boolean;
@@ -222,6 +224,8 @@ declare const ProLayout: {
         onTabClick: (key: string) => void;
         onTabDelete: (key: string) => void;
         keepAliveKeys: ComputedRef<string[]>;
+        headerHeight: number;
+        headerHeightWidthPx: string;
         siderWidth: number;
         siderCollapsedWidth: number;
         siderWidthPx: string;
@@ -279,13 +283,13 @@ declare const ProLayout: {
         [name: string]: Slot | undefined;
     }>;
     menuSelectedKeys: Ref<string[]>;
-    menuOpenKeys: Ref<string[]>;
     onMenuItemClick: (key: string) => void;
-    onSubMenuClick: (key: string, openKeys: string[]) => void;
     activeMenuItem: Ref<IProMenuItem | undefined>;
+    menuItemMap: Ref<Record<string, IProMenuItem>>;
     breadcrumbItems: Ref<string[]>;
     tabs: Ref<{
         name: string;
+        parentNames: string[];
         title: string;
         fullPath: string;
         active: boolean;
@@ -293,6 +297,8 @@ declare const ProLayout: {
     onTabClick: (key: string) => void;
     onTabDelete: (key: string) => void;
     keepAliveKeys: ComputedRef<string[]>;
+    headerHeight: number;
+    headerHeightWidthPx: string;
     siderWidth: number;
     siderCollapsedWidth: number;
     siderWidthPx: string;

package/es/pro-layout/pro-layout.vue.d.ts

@@ -45,13 +45,13 @@ declare const _sfc_main: DefineComponent<{
         [name: string]: Slot | undefined;
     }>;
     menuSelectedKeys: Ref<string[]>;
-    menuOpenKeys: Ref<string[]>;
     onMenuItemClick: (key: string) => void;
-    onSubMenuClick: (key: string, openKeys: string[]) => void;
     activeMenuItem: Ref<IProMenuItem | undefined>;
+    menuItemMap: Ref<Record<string, IProMenuItem>>;
     breadcrumbItems: Ref<string[]>;
     tabs: Ref<{
         name: string;
+        parentNames: string[];
         title: string;
         fullPath: string;
         active: boolean;
@@ -59,6 +59,8 @@ declare const _sfc_main: DefineComponent<{
     onTabClick: (key: string) => void;
     onTabDelete: (key: string) => void;
     keepAliveKeys: ComputedRef<string[]>;
+    headerHeight: number;
+    headerHeightWidthPx: string;
     siderWidth: number;
     siderCollapsedWidth: number;
     siderWidthPx: string;

package/es/pro-layout/pro-layout.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent, useCssVars, toRefs, useSlots, provide, computed, ref, watch, resolveComponent, openBlock, createBlock, normalizeClass, withCtx, createVNode, createElementVNode, unref, renderSlot, createTextVNode, toDisplayString, createCommentVNode, resolveDynamicComponent, KeepAlive } from "vue";
+import { defineComponent, useCssVars, toRefs, useSlots, computed, provide, ref, watch, resolveComponent, openBlock, createBlock, normalizeClass, withCtx, createVNode, createElementVNode, unref, renderSlot, createTextVNode, toDisplayString, createCommentVNode, resolveDynamicComponent, KeepAlive } from "vue";
 import { useHooks } from "./hooks.js";
 const _hoisted_1 = ["src"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -46,18 +46,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props, { emit }) {
     const props = __props;
     useCssVars((_ctx) => ({
-      "1e11aed1": siderWidthPx,
-      "043fd9d8": siderCollapsedWidthPx
+      "aa0adaee": headerHeightWidthPx,
+      "f32a33f8": siderWidthPx,
+      "5b964541": siderCollapsedWidthPx
     }));
     const prefixClsName = "keyblade-pro-layout";
     const { menuItems } = toRefs(props);
     const slots = useSlots();
     const {
       menuSelectedKeys,
-      menuOpenKeys,
       onMenuItemClick,
-      onSubMenuClick,
       activeMenuItem,
+      menuItemMap,
       breadcrumbItems,
       tabs,
       onTabClick,
@@ -65,18 +65,23 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     } = useHooks(menuItems, {
       tabsMode: props.tabsMode
     });
-    provide("ProBreadcrumbItems", breadcrumbItems);
     const keepAliveKeys = computed(() => {
-      const keys = [];
+      const keys = /* @__PURE__ */ new Set();
       tabs.value.forEach((tab) => {
-        var _a, _b;
-        if (tab.name === ((_a = activeMenuItem == null ? void 0 : activeMenuItem.value) == null ? void 0 : _a.name) && ((_b = activeMenuItem.value) == null ? void 0 : _b.ignoreCache)) {
-          return;
-        }
-        keys.push(tab.name);
+        tab.parentNames.forEach((name) => {
+          const menuItem = menuItemMap.value[name];
+          if (menuItem.ignoreCache) {
+            return;
+          }
+          keys.add(menuItem.name);
+        });
       });
-      return keys;
+      return Array.from(keys.values());
     });
+    provide("ProBreadcrumbItems", breadcrumbItems);
+    provide("ProKeepAliveKeys", keepAliveKeys);
+    const headerHeight = 60;
+    const headerHeightWidthPx = `${headerHeight}px`;
     const siderWidth = 220;
     const siderCollapsedWidth = 48;
     const siderWidthPx = `${siderWidth}px`;
@@ -103,6 +108,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const _component_kb_pro_menu = resolveComponent("kb-pro-menu");
       const _component_a_layout_sider = resolveComponent("a-layout-sider");
       const _component_kb_pro_reuse_tabs = resolveComponent("kb-pro-reuse-tabs");
+      const _component_a_affix = resolveComponent("a-affix");
       const _component_router_view = resolveComponent("router-view");
       const _component_kb_pro_page_wrapper = resolveComponent("kb-pro-page-wrapper");
       const _component_a_layout_content = resolveComponent("a-layout-content");
@@ -168,12 +174,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       style: { "flex": "1" },
                       collapsed: siderCollapsed.value,
                       "selected-keys": unref(menuSelectedKeys),
-                      "open-keys": unref(menuOpenKeys),
                       items: unref(menuItems),
                       onCollapse: onSiderCollapse,
-                      onMenuItemClick: unref(onMenuItemClick),
-                      onSubMenuClick: unref(onSubMenuClick)
-                    }, null, 8, ["collapsed", "selected-keys", "open-keys", "items", "onMenuItemClick", "onSubMenuClick"])
+                      onMenuItemClick: unref(onMenuItemClick)
+                    }, null, 8, ["collapsed", "selected-keys", "items", "onMenuItemClick"])
                   ], 2)
                 ]),
                 _: 3
@@ -182,16 +186,24 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 class: normalizeClass(`${prefixClsName}-body` + (siderCollapsed.value ? ` ${prefixClsName}-body-collapsed` : ""))
               }, {
                 default: withCtx(() => [
+                  createVNode(_component_a_affix, {
+                    class: normalizeClass(`${prefixClsName}-body-affix`),
+                    offsetTop: headerHeight
+                  }, {
+                    default: withCtx(() => [
+                      __props.tabsMode && unref(tabs).length > 0 ? (openBlock(), createBlock(_component_kb_pro_reuse_tabs, {
+                        key: 0,
+                        tabs: unref(tabs),
+                        onTabClick: unref(onTabClick),
+                        onTabDelete: unref(onTabDelete)
+                      }, null, 8, ["tabs", "onTabClick", "onTabDelete"])) : createCommentVNode("", true)
+                    ]),
+                    _: 1
+                  }, 8, ["class"]),
                   createVNode(_component_a_layout_content, null, {
                     default: withCtx(() => {
                       var _a;
                       return [
-                        __props.tabsMode && unref(tabs).length > 0 ? (openBlock(), createBlock(_component_kb_pro_reuse_tabs, {
-                          key: 0,
-                          tabs: unref(tabs),
-                          onTabClick: unref(onTabClick),
-                          onTabDelete: unref(onTabDelete)
-                        }, null, 8, ["tabs", "onTabClick", "onTabDelete"])) : createCommentVNode("", true),
                         createVNode(_component_kb_pro_page_wrapper, {
                           "hide-page-wrapper": (_a = unref(activeMenuItem)) == null ? void 0 : _a.hidePageWrapper
                         }, {

package/es/pro-menu/index.d.ts

@@ -14,10 +14,6 @@ declare const ProMenu: {
                 type: PropType<string[]>;
                 required: true;
             };
-            openKeys: {
-                type: PropType<string[]>;
-                required: true;
-            };
             items: {
                 type: PropType<IProMenuItem[]>;
                 required: true;
@@ -49,10 +45,6 @@ declare const ProMenu: {
                 type: PropType<string[]>;
                 required: true;
             };
-            openKeys: {
-                type: PropType<string[]>;
-                required: true;
-            };
             items: {
                 type: PropType<IProMenuItem[]>;
                 required: true;
@@ -63,7 +55,9 @@ declare const ProMenu: {
             "onSub-menu-click"?: ((key: string, openKeys: string[]) => any) | undefined;
         }, {
             prefixClsName: string;
+            props: any;
             emit: ((event: "collapse", collapsed: boolean) => void) & ((event: "menu-item-click", key: string) => void) & ((event: "sub-menu-click", key: string, openKeys: string[]) => void);
+            onMenuItemClick: (key: string) => void;
             ProMenuItem: DefineComponent<{
                 item: {
                     type: null;
@@ -111,10 +105,6 @@ declare const ProMenu: {
             type: PropType<string[]>;
             required: true;
         };
-        openKeys: {
-            type: PropType<string[]>;
-            required: true;
-        };
         items: {
             type: PropType<IProMenuItem[]>;
             required: true;
@@ -125,7 +115,9 @@ declare const ProMenu: {
         "onSub-menu-click"?: ((key: string, openKeys: string[]) => any) | undefined;
     } & ShallowUnwrapRef<{
         prefixClsName: string;
+        props: any;
         emit: ((event: "collapse", collapsed: boolean) => void) & ((event: "menu-item-click", key: string) => void) & ((event: "sub-menu-click", key: string, openKeys: string[]) => void);
+        onMenuItemClick: (key: string) => void;
         ProMenuItem: DefineComponent<{
             item: {
                 type: null;
@@ -153,10 +145,6 @@ declare const ProMenu: {
         type: PropType<string[]>;
         required: true;
     };
-    openKeys: {
-        type: PropType<string[]>;
-        required: true;
-    };
     items: {
         type: PropType<IProMenuItem[]>;
         required: true;
@@ -167,7 +155,9 @@ declare const ProMenu: {
     "onSub-menu-click"?: ((key: string, openKeys: string[]) => any) | undefined;
 }, {
     prefixClsName: string;
+    props: any;
     emit: ((event: "collapse", collapsed: boolean) => void) & ((event: "menu-item-click", key: string) => void) & ((event: "sub-menu-click", key: string, openKeys: string[]) => void);
+    onMenuItemClick: (key: string) => void;
     ProMenuItem: DefineComponent<{
         item: {
             type: null;

package/es/pro-menu/pro-menu-item.vue.js

@@ -14,6 +14,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (!(item == null ? void 0 : item.path)) {
         return;
       }
+      if (item.path.startsWith("http") || item.path.startsWith("https")) {
+        window.open(item.path);
+        return;
+      }
       router.push({ path: item.path });
     };
     return (_ctx, _cache) => {

package/es/pro-menu/pro-menu.vue.d.ts

@@ -10,17 +10,15 @@ declare const _sfc_main: DefineComponent<{
         type: PropType<string[]>;
         required: true;
     };
-    openKeys: {
-        type: PropType<string[]>;
-        required: true;
-    };
     items: {
         type: PropType<IProMenuItem[]>;
         required: true;
     };
 }, {
     prefixClsName: string;
+    props: any;
     emit: ((event: "collapse", collapsed: boolean) => void) & ((event: "menu-item-click", key: string) => void) & ((event: "sub-menu-click", key: string, openKeys: string[]) => void);
+    onMenuItemClick: (key: string) => void;
     ProMenuItem: DefineComponent<{
         item: {
             type: null;
@@ -48,10 +46,6 @@ declare const _sfc_main: DefineComponent<{
         type: PropType<string[]>;
         required: true;
     };
-    openKeys: {
-        type: PropType<string[]>;
-        required: true;
-    };
     items: {
         type: PropType<IProMenuItem[]>;
         required: true;

package/es/pro-menu/pro-menu.vue.js

@@ -11,10 +11,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       type: Array,
       required: true
     },
-    openKeys: {
-      type: Array,
-      required: true
-    },
     items: {
       type: Array,
       required: true
@@ -26,19 +22,41 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     "sub-menu-click": (key, openKeys) => true
   },
   setup(__props, { emit }) {
+    const props = __props;
     const prefixClsName = "keyblade-pro-menu";
+    const onMenuItemClick = (key) => {
+      let findItem;
+      const find = (items) => {
+        var _a;
+        for (let i = 0; i < items.length; i++) {
+          const item = items[i];
+          if (item.name === key) {
+            findItem = item;
+            return;
+          }
+          if ((item == null ? void 0 : item.children) && ((_a = item.children) == null ? void 0 : _a.length) > 0) {
+            find(item.children);
+          }
+        }
+      };
+      find(props.items);
+      if (findItem && (findItem.path.startsWith("http") || findItem.path.startsWith("https"))) {
+        return;
+      }
+      emit("menu-item-click", key);
+    };
     return (_ctx, _cache) => {
       const _component_a_menu = resolveComponent("a-menu");
       return openBlock(), createBlock(_component_a_menu, {
         class: normalizeClass(prefixClsName),
         collapsed: __props.collapsed,
-        "open-keys": __props.openKeys,
         "selected-keys": __props.selectedKeys,
         "show-collapse-button": "",
+        "auto-open-selected": "",
         breakpoint: "md",
         onCollapse: _cache[0] || (_cache[0] = ($event) => emit("collapse", $event)),
-        onMenuItemClick: _cache[1] || (_cache[1] = ($event) => emit("menu-item-click", $event)),
-        onSubMenuClick: _cache[2] || (_cache[2] = (_key, _openKeys) => emit("sub-menu-click", _key, _openKeys))
+        onMenuItemClick,
+        onSubMenuClick: _cache[1] || (_cache[1] = (_key, _openKeys) => emit("sub-menu-click", _key, _openKeys))
       }, {
         default: withCtx(() => [
           (openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item) => {
@@ -49,7 +67,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           }), 128))
         ]),
         _: 1
-      }, 8, ["collapsed", "open-keys", "selected-keys"]);
+      }, 8, ["collapsed", "selected-keys"]);
     };
   }
 });

package/es/pro-reuse-tabs/interface.d.ts

@@ -4,6 +4,8 @@
 export interface IProTab {
     /** 菜单名称 */
     name: string;
+    /** 所有父级且包含自己的所有名称（主要用作路由缓存） */
+    parentNames: string[];
     /** 菜单标题 */
     title: string;
     /** 完整路径 */

package/es/style.css

@@ -1,11 +1,11 @@
+.keyblade-pro-page-wrapper {
+  padding: 0 20px 20px 20px;
+}
 .keyblade-pro-reuse-tabs {
   position: relative;
   background-color: var(--color-bg-2);
   padding: 4px 20px;
 }
-.keyblade-pro-page-wrapper {
-  padding: 0 20px 20px 20px;
-}
 .keyblade-pro-layout {
   width: 100%;
   height: 100%;
@@ -18,7 +18,7 @@
   top: 0;
   left: 0;
   width: 100%;
-  height: 60px;
+  height: var(--aa0adaee);
   z-index: 100;
   display: flex;
   align-items: center;
@@ -40,7 +40,7 @@
   font-size: 18px;
 }
 .keyblade-pro-layout-sider {
-  padding-top: 60px;
+  padding-top: var(--aa0adaee);
   position: fixed;
   top: 0;
   left: 0;
@@ -55,8 +55,8 @@
   overflow: auto;
 }
 .keyblade-pro-layout-body {
-  padding-top: 60px;
-  padding-left: var(--1e11aed1);
+  padding-top: var(--aa0adaee);
+  padding-left: var(--f32a33f8);
   min-height: 100vh;
   overflow-y: hidden;
   background-color: var(--color-fill-2);
@@ -76,5 +76,5 @@
   text-align: center;
 }
 .keyblade-pro-layout-body-collapsed {
-  padding-left: var(--043fd9d8);
+  padding-left: var(--5b964541);
 }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@keyblade/pro-components",
   "description": "KeyBlade Pro Components",
   "author": "yangshuai <704807396@qq.com>",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "private": false,
   "type": "module",
   "main": "es/index.js",