@keyblade/pro-components 0.0.1-alpha.7 → 0.0.2

package/es/components.d.ts

@@ -1,6 +1,7 @@
 declare module 'vue' {
     interface GlobalComponents {
         KbProBreadcrumb: typeof import('./index')['ProBreadcrumb'];
+        KbProLayout: typeof import('./index')['ProLayout'];
         KbProMenu: typeof import('./index')['ProMenu'];
         KbProPageWrapper: typeof import('./index')['ProPageWrapper'];
         KbProReuseTabs: typeof import('./index')['ProReuseTabs'];

package/es/index.d.ts

@@ -4,6 +4,8 @@ declare const _default: {
 };
 export default _default;
 export { default as ProBreadcrumb } from './pro-breadcrumb';
+export { default as ProLayout } from './pro-layout';
+export type { EProLayoutTheme } from './pro-layout';
 export { default as ProMenu } from './pro-menu';
 export type { IProMenuItem } from './pro-menu';
 export { default as ProPageWrapper } from './pro-page-wrapper';

package/es/index.js

@@ -6,9 +6,12 @@ import { ProPageWrapper } from "./pro-page-wrapper/index.js";
 import { ProPageWrapper as ProPageWrapper2 } from "./pro-page-wrapper/index.js";
 import { ProReuseTabs } from "./pro-reuse-tabs/index.js";
 import { ProReuseTabs as ProReuseTabs2 } from "./pro-reuse-tabs/index.js";
+import { ProLayout } from "./pro-layout/index.js";
+import { ProLayout as ProLayout2 } from "./pro-layout/index.js";
 const index = {
   install(app) {
     app.use(ProBreadcrumb);
+    app.use(ProLayout);
     app.use(ProMenu);
     app.use(ProPageWrapper);
     app.use(ProReuseTabs);
@@ -16,6 +19,7 @@ const index = {
 };
 export {
   ProBreadcrumb2 as ProBreadcrumb,
+  ProLayout2 as ProLayout,
   ProMenu2 as ProMenu,
   ProPageWrapper2 as ProPageWrapper,
   ProReuseTabs2 as ProReuseTabs,

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

@@ -0,0 +1,5 @@
+/** 主题 */
+export declare enum EProLayoutTheme {
+    light = "light",
+    dark = "dark"
+}

package/es/pro-layout/enum.js

@@ -0,0 +1,8 @@
+var EProLayoutTheme = /* @__PURE__ */ ((EProLayoutTheme2) => {
+  EProLayoutTheme2["light"] = "light";
+  EProLayoutTheme2["dark"] = "dark";
+  return EProLayoutTheme2;
+})(EProLayoutTheme || {});
+export {
+  EProLayoutTheme
+};

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

@@ -0,0 +1,20 @@
+import { type Ref } from 'vue';
+import type { IProMenuItem } from '../../pro-menu';
+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>;
+    breadcrumbItems: Ref<string[]>;
+    tabs: Ref<{
+        name: string;
+        title: string;
+        fullPath: string;
+        active: boolean;
+    }[]>;
+    onTabClick: (key: string) => void;
+    onTabDelete: (key: string) => void;
+};

package/es/pro-layout/hooks/index.js

@@ -0,0 +1,151 @@
+import { ref, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
+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 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 children = _menuItem[i].children;
+        if (children) {
+          const node = recursion(children);
+          if (node) {
+            menuItemPaths.push(_menuItem[i]);
+          }
+        }
+      }
+      return find;
+    };
+    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);
+    breadcrumbItems.value = ((_a = activeMenuItem.value) == null ? void 0 : _a.breadcrumbs) ? (_b = activeMenuItem.value) == null ? void 0 : _b.breadcrumbs : activeMenuItemTitles.length !== 0 ? activeMenuItemTitles : [];
+  };
+  function setTabs() {
+    if (!activeMenuItem.value) {
+      tabs.value.forEach((tab) => {
+        tab.active = false;
+      });
+      return;
+    }
+    const { name: menuItemName, title: menuItemTitle, noAffix } = activeMenuItem.value;
+    if (noAffix) {
+      return;
+    }
+    let findIndex = -1;
+    tabs.value.forEach((v, i) => {
+      v.active = false;
+      if (v.name === menuItemName) {
+        findIndex = i;
+      }
+    });
+    const newTab = {
+      name: menuItemName,
+      title: menuItemTitle ?? menuItemName,
+      fullPath: route.fullPath,
+      active: true
+    };
+    if (~findIndex) {
+      const findTab = tabs.value[findIndex];
+      if (findTab.fullPath === route.fullPath) {
+        findTab.active = true;
+        findTab.fullPath = route.fullPath;
+      } else {
+        tabs.value.splice(findIndex, 1);
+        setTimeout(() => {
+          tabs.value.push(newTab);
+        });
+      }
+    } else {
+      tabs.value.push(newTab);
+    }
+  }
+  const onTabClick = (key) => {
+    const findTabIndex = tabs.value.findIndex((v) => v.name === key);
+    const findTab = tabs.value[findTabIndex];
+    router.push(findTab.fullPath);
+  };
+  const onTabDelete = (key) => {
+    let activeIndex = -1;
+    let findTabIndex = -1;
+    tabs.value.forEach((tab, index) => {
+      if (tab.name === key) {
+        findTabIndex = index;
+      }
+      if (tab.active) {
+        activeIndex = index;
+      }
+    });
+    if (activeIndex === findTabIndex) {
+      let tab;
+      if (findTabIndex === 0) {
+        tab = tabs.value[findTabIndex + 1];
+      } else {
+        tab = tabs.value[findTabIndex - 1];
+      }
+      tab.active = true;
+      router.push(tab.fullPath);
+    }
+    tabs.value.splice(findTabIndex, 1);
+  };
+  watch(menuItems, () => {
+    const _menuItemMap = {};
+    const fn = (_menuItem) => {
+      _menuItem.forEach((menuItem) => {
+        if (menuItem.children && menuItem.children.length > 0) {
+          fn(menuItem.children);
+        }
+        delete menuItem["children"];
+        _menuItemMap[menuItem.name] = menuItem;
+      });
+    };
+    fn(JSON.parse(JSON.stringify(menuItems.value)));
+    menuItemMap.value = _menuItemMap;
+  }, { immediate: true });
+  watch(() => route == null ? void 0 : route.name, () => {
+    const routeName = route == null ? void 0 : route.name;
+    activeMenuItem.value = menuItemMap.value[routeName];
+    menuSelectedKeys.value = (activeMenuItem == null ? void 0 : activeMenuItem.value) ? [activeMenuItem.value.name] : [];
+    setBreadcrumbItems();
+    if (options.tabsMode) {
+      setTabs();
+    }
+  }, { immediate: true });
+  return {
+    menuSelectedKeys,
+    menuOpenKeys,
+    onMenuItemClick,
+    onSubMenuClick,
+    activeMenuItem,
+    breadcrumbItems,
+    tabs,
+    onTabClick,
+    onTabDelete
+  };
+}
+export {
+  useHooks
+};

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

@@ -0,0 +1,6 @@
+import type { Ref } from 'vue';
+import { EProLayoutTheme } from '../enum';
+export declare function useThemeHooks(initValue: EProLayoutTheme): {
+    currentTheme: Readonly<Ref<EProLayoutTheme>>;
+    onToggleCurrentTheme: () => void;
+};

package/es/pro-layout/hooks/theme.js

@@ -0,0 +1,41 @@
+import { ref, watch, readonly } from "vue";
+import { EProLayoutTheme } from "../enum.js";
+function useThemeHooks(initValue) {
+  const themeStorageKey = "theme";
+  const theme = ref(localStorage.getItem(themeStorageKey) ?? initValue);
+  const setTheme = (_theme) => {
+    switch (_theme) {
+      case EProLayoutTheme.light:
+        document.body.removeAttribute("arco-theme");
+        break;
+      case EProLayoutTheme.dark:
+        document.body.setAttribute("arco-theme", "dark");
+        break;
+    }
+    theme.value = _theme;
+    localStorage.setItem(themeStorageKey, theme.value);
+  };
+  const onToggleTheme = () => {
+    switch (theme.value) {
+      case EProLayoutTheme.light:
+        setTheme(EProLayoutTheme.dark);
+        break;
+      case EProLayoutTheme.dark:
+        setTheme(EProLayoutTheme.light);
+        break;
+    }
+  };
+  watch(theme, () => {
+    setTheme(theme.value);
+  }, { immediate: true });
+  watch(() => initValue, () => {
+    setTheme(initValue);
+  });
+  return {
+    currentTheme: readonly(theme),
+    onToggleCurrentTheme: onToggleTheme
+  };
+}
+export {
+  useThemeHooks
+};

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

@@ -0,0 +1,379 @@
+import type { EProLayoutTheme } from './enum';
+import type { IProMenuItem } from '../pro-menu';
+import type { ComponentInternalInstance, ExtractPropTypes, PropType, VNodeProps, AllowedComponentProps, ComponentCustomProps, Slot, ComponentPublicInstance, ComponentOptionsBase, Ref, ComputedRef, ComponentOptionsMixin, DebuggerEvent, nextTick, WatchOptions, WatchStopHandle, ShallowUnwrapRef, ComponentCustomProperties, App } from 'vue';
+declare const ProLayout: {
+    new (...args: any[]): {
+        $: ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{
+            menuItems: IProMenuItem[];
+            headerTitle: string;
+            headerLogo: string;
+            headerRightItemSlotNames: string[];
+            hideThemeItem: boolean;
+            footerTitle: string;
+            theme: EProLayoutTheme;
+            tabsMode: boolean;
+            user: {
+                name: string;
+                avatar?: string | undefined;
+            };
+        }> & Omit<Readonly<ExtractPropTypes<{
+            menuItems: {
+                type: PropType<IProMenuItem[]>;
+                required: false;
+                default: () => never[];
+            };
+            headerTitle: {
+                type: PropType<string>;
+                required: false;
+                default: string;
+            };
+            headerLogo: {
+                type: PropType<string>;
+                required: false;
+                default: string;
+            };
+            headerRightItemSlotNames: {
+                type: PropType<string[]>;
+                required: false;
+                default: () => never[];
+            };
+            hideThemeItem: {
+                type: PropType<boolean>;
+                required: false;
+                default: boolean;
+            };
+            footerTitle: {
+                type: PropType<string>;
+                required: false;
+                default: string;
+            };
+            theme: {
+                type: PropType<EProLayoutTheme>;
+                required: false;
+                default: EProLayoutTheme;
+            };
+            tabsMode: {
+                type: PropType<boolean>;
+                required: false;
+                default: boolean;
+            };
+            user: {
+                type: PropType<{
+                    name: string;
+                    avatar?: string | undefined;
+                }>;
+                required: false;
+                default: undefined;
+            };
+        }>> & VNodeProps & AllowedComponentProps & ComponentCustomProps, "menuItems" | "headerTitle" | "headerLogo" | "headerRightItemSlotNames" | "hideThemeItem" | "footerTitle" | "theme" | "tabsMode" | "user">;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: Slot | undefined;
+        }>;
+        $root: ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null;
+        $parent: ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null;
+        $emit: (event: string, ...args: any[]) => void;
+        $el: any;
+        $options: ComponentOptionsBase<Readonly<ExtractPropTypes<{
+            menuItems: {
+                type: PropType<IProMenuItem[]>;
+                required: false;
+                default: () => never[];
+            };
+            headerTitle: {
+                type: PropType<string>;
+                required: false;
+                default: string;
+            };
+            headerLogo: {
+                type: PropType<string>;
+                required: false;
+                default: string;
+            };
+            headerRightItemSlotNames: {
+                type: PropType<string[]>;
+                required: false;
+                default: () => never[];
+            };
+            hideThemeItem: {
+                type: PropType<boolean>;
+                required: false;
+                default: boolean;
+            };
+            footerTitle: {
+                type: PropType<string>;
+                required: false;
+                default: string;
+            };
+            theme: {
+                type: PropType<EProLayoutTheme>;
+                required: false;
+                default: EProLayoutTheme;
+            };
+            tabsMode: {
+                type: PropType<boolean>;
+                required: false;
+                default: boolean;
+            };
+            user: {
+                type: PropType<{
+                    name: string;
+                    avatar?: string | undefined;
+                }>;
+                required: false;
+                default: undefined;
+            };
+        }>>, {
+            prefixClsName: string;
+            props: any;
+            menuItems: Ref<IProMenuItem[]>;
+            slots: Readonly<{
+                [name: string]: Slot | undefined;
+            }>;
+            currentTheme: Readonly<Ref<EProLayoutTheme>>;
+            onToggleCurrentTheme: () => void;
+            menuSelectedKeys: Ref<string[]>;
+            menuOpenKeys: Ref<string[]>;
+            onMenuItemClick: (key: string) => void;
+            onSubMenuClick: (key: string, openKeys: string[]) => void;
+            activeMenuItem: Ref<IProMenuItem | undefined>;
+            breadcrumbItems: Ref<string[]>;
+            tabs: Ref<{
+                name: string;
+                title: string;
+                fullPath: string;
+                active: boolean;
+            }[]>;
+            onTabClick: (key: string) => void;
+            onTabDelete: (key: string) => void;
+            keepAliveKeys: ComputedRef<string[]>;
+            siderWidth: number;
+            siderCollapsedWidth: number;
+            siderWidthPx: string;
+            siderCollapsedWidthPx: string;
+            siderCollapsed: Ref<boolean>;
+            onSiderCollapse: (val: boolean) => void;
+            readonly EProLayoutTheme: typeof EProLayoutTheme;
+        }, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, {
+            menuItems: IProMenuItem[];
+            headerTitle: string;
+            headerLogo: string;
+            headerRightItemSlotNames: string[];
+            hideThemeItem: boolean;
+            footerTitle: string;
+            theme: EProLayoutTheme;
+            tabsMode: boolean;
+            user: {
+                name: string;
+                avatar?: string | undefined;
+            };
+        }, {}, string> & {
+            beforeCreate?: ((() => void) | (() => void)[]) | undefined;
+            created?: ((() => void) | (() => void)[]) | undefined;
+            beforeMount?: ((() => void) | (() => void)[]) | undefined;
+            mounted?: ((() => void) | (() => void)[]) | undefined;
+            beforeUpdate?: ((() => void) | (() => void)[]) | undefined;
+            updated?: ((() => void) | (() => void)[]) | undefined;
+            activated?: ((() => void) | (() => void)[]) | undefined;
+            deactivated?: ((() => void) | (() => void)[]) | undefined;
+            beforeDestroy?: ((() => void) | (() => void)[]) | undefined;
+            beforeUnmount?: ((() => void) | (() => void)[]) | undefined;
+            destroyed?: ((() => void) | (() => void)[]) | undefined;
+            unmounted?: ((() => void) | (() => void)[]) | undefined;
+            renderTracked?: (((e: DebuggerEvent) => void) | ((e: DebuggerEvent) => void)[]) | undefined;
+            renderTriggered?: (((e: DebuggerEvent) => void) | ((e: DebuggerEvent) => void)[]) | undefined;
+            errorCaptured?: (((err: unknown, instance: ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null, info: string) => boolean | void) | ((err: unknown, instance: ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null, info: string) => boolean | void)[]) | undefined;
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof nextTick;
+        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: WatchOptions<boolean> | undefined): WatchStopHandle;
+    } & Readonly<ExtractPropTypes<{
+        menuItems: {
+            type: PropType<IProMenuItem[]>;
+            required: false;
+            default: () => never[];
+        };
+        headerTitle: {
+            type: PropType<string>;
+            required: false;
+            default: string;
+        };
+        headerLogo: {
+            type: PropType<string>;
+            required: false;
+            default: string;
+        };
+        headerRightItemSlotNames: {
+            type: PropType<string[]>;
+            required: false;
+            default: () => never[];
+        };
+        hideThemeItem: {
+            type: PropType<boolean>;
+            required: false;
+            default: boolean;
+        };
+        footerTitle: {
+            type: PropType<string>;
+            required: false;
+            default: string;
+        };
+        theme: {
+            type: PropType<EProLayoutTheme>;
+            required: false;
+            default: EProLayoutTheme;
+        };
+        tabsMode: {
+            type: PropType<boolean>;
+            required: false;
+            default: boolean;
+        };
+        user: {
+            type: PropType<{
+                name: string;
+                avatar?: string | undefined;
+            }>;
+            required: false;
+            default: undefined;
+        };
+    }>> & ShallowUnwrapRef<{
+        prefixClsName: string;
+        props: any;
+        menuItems: Ref<IProMenuItem[]>;
+        slots: Readonly<{
+            [name: string]: Slot | undefined;
+        }>;
+        currentTheme: Readonly<Ref<EProLayoutTheme>>;
+        onToggleCurrentTheme: () => void;
+        menuSelectedKeys: Ref<string[]>;
+        menuOpenKeys: Ref<string[]>;
+        onMenuItemClick: (key: string) => void;
+        onSubMenuClick: (key: string, openKeys: string[]) => void;
+        activeMenuItem: Ref<IProMenuItem | undefined>;
+        breadcrumbItems: Ref<string[]>;
+        tabs: Ref<{
+            name: string;
+            title: string;
+            fullPath: string;
+            active: boolean;
+        }[]>;
+        onTabClick: (key: string) => void;
+        onTabDelete: (key: string) => void;
+        keepAliveKeys: ComputedRef<string[]>;
+        siderWidth: number;
+        siderCollapsedWidth: number;
+        siderWidthPx: string;
+        siderCollapsedWidthPx: string;
+        siderCollapsed: Ref<boolean>;
+        onSiderCollapse: (val: boolean) => void;
+        readonly EProLayoutTheme: typeof EProLayoutTheme;
+    }> & {} & ComponentCustomProperties & {};
+    __isFragment?: undefined;
+    __isTeleport?: undefined;
+    __isSuspense?: undefined;
+} & ComponentOptionsBase<Readonly<ExtractPropTypes<{
+    menuItems: {
+        type: PropType<IProMenuItem[]>;
+        required: false;
+        default: () => never[];
+    };
+    headerTitle: {
+        type: PropType<string>;
+        required: false;
+        default: string;
+    };
+    headerLogo: {
+        type: PropType<string>;
+        required: false;
+        default: string;
+    };
+    headerRightItemSlotNames: {
+        type: PropType<string[]>;
+        required: false;
+        default: () => never[];
+    };
+    hideThemeItem: {
+        type: PropType<boolean>;
+        required: false;
+        default: boolean;
+    };
+    footerTitle: {
+        type: PropType<string>;
+        required: false;
+        default: string;
+    };
+    theme: {
+        type: PropType<EProLayoutTheme>;
+        required: false;
+        default: EProLayoutTheme;
+    };
+    tabsMode: {
+        type: PropType<boolean>;
+        required: false;
+        default: boolean;
+    };
+    user: {
+        type: PropType<{
+            name: string;
+            avatar?: string | undefined;
+        }>;
+        required: false;
+        default: undefined;
+    };
+}>>, {
+    prefixClsName: string;
+    props: any;
+    menuItems: Ref<IProMenuItem[]>;
+    slots: Readonly<{
+        [name: string]: Slot | undefined;
+    }>;
+    currentTheme: Readonly<Ref<EProLayoutTheme>>;
+    onToggleCurrentTheme: () => void;
+    menuSelectedKeys: Ref<string[]>;
+    menuOpenKeys: Ref<string[]>;
+    onMenuItemClick: (key: string) => void;
+    onSubMenuClick: (key: string, openKeys: string[]) => void;
+    activeMenuItem: Ref<IProMenuItem | undefined>;
+    breadcrumbItems: Ref<string[]>;
+    tabs: Ref<{
+        name: string;
+        title: string;
+        fullPath: string;
+        active: boolean;
+    }[]>;
+    onTabClick: (key: string) => void;
+    onTabDelete: (key: string) => void;
+    keepAliveKeys: ComputedRef<string[]>;
+    siderWidth: number;
+    siderCollapsedWidth: number;
+    siderWidthPx: string;
+    siderCollapsedWidthPx: string;
+    siderCollapsed: Ref<boolean>;
+    onSiderCollapse: (val: boolean) => void;
+    readonly EProLayoutTheme: typeof EProLayoutTheme;
+}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, {
+    menuItems: IProMenuItem[];
+    headerTitle: string;
+    headerLogo: string;
+    headerRightItemSlotNames: string[];
+    hideThemeItem: boolean;
+    footerTitle: string;
+    theme: EProLayoutTheme;
+    tabsMode: boolean;
+    user: {
+        name: string;
+        avatar?: string | undefined;
+    };
+}, {}, string> & VNodeProps & AllowedComponentProps & ComponentCustomProps & {
+    install: (app: App) => void;
+};
+export * from './enum';
+export { ProLayout };
+export default ProLayout;

package/es/pro-layout/index.js

@@ -0,0 +1,25 @@
+import _sfc_main from "./pro-layout.vue.js";
+import "./pro-layout.vue2.js";
+import { Layout, Space, Typography, Tooltip, Button, Dropdown, Avatar } from "@arco-design/web-vue";
+import { ProMenu } from "../pro-menu/index.js";
+import { ProReuseTabs } from "../pro-reuse-tabs/index.js";
+import { ProPageWrapper } from "../pro-page-wrapper/index.js";
+const ProLayout = Object.assign(_sfc_main, {
+  install: (app) => {
+    app.use(Layout);
+    app.use(Space);
+    app.use(Typography);
+    app.use(Tooltip);
+    app.use(Button);
+    app.use(Dropdown);
+    app.use(Avatar);
+    app.use(ProMenu);
+    app.use(ProReuseTabs);
+    app.use(ProPageWrapper);
+    app.component("KbProLayout", _sfc_main);
+  }
+});
+export {
+  ProLayout,
+  ProLayout as default
+};

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

@@ -0,0 +1,147 @@
+import type { DefineComponent, Ref, Slot, ComputedRef, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes, type PropType } from 'vue';
+import type { IProMenuItem } from '../pro-menu';
+import { EProLayoutTheme } from './enum';
+declare const _sfc_main: DefineComponent<{
+    menuItems: {
+        type: PropType<IProMenuItem[]>;
+        required: false;
+        default: () => never[];
+    };
+    headerTitle: {
+        type: PropType<string>;
+        required: false;
+        default: string;
+    };
+    headerLogo: {
+        type: PropType<string>;
+        required: false;
+        default: string;
+    };
+    headerRightItemSlotNames: {
+        type: PropType<string[]>;
+        required: false;
+        default: () => never[];
+    };
+    hideThemeItem: {
+        type: PropType<boolean>;
+        required: false;
+        default: boolean;
+    };
+    footerTitle: {
+        type: PropType<string>;
+        required: false;
+        default: string;
+    };
+    theme: {
+        type: PropType<EProLayoutTheme>;
+        required: false;
+        default: EProLayoutTheme;
+    };
+    tabsMode: {
+        type: PropType<boolean>;
+        required: false;
+        default: boolean;
+    };
+    user: {
+        type: PropType<{
+            name: string;
+            avatar?: string | undefined;
+        }>;
+        required: false;
+        default: undefined;
+    };
+}, {
+    prefixClsName: string;
+    props: any;
+    menuItems: Ref<IProMenuItem[]>;
+    slots: Readonly<{
+        [name: string]: Slot | undefined;
+    }>;
+    currentTheme: Readonly<Ref<EProLayoutTheme>>;
+    onToggleCurrentTheme: () => void;
+    menuSelectedKeys: Ref<string[]>;
+    menuOpenKeys: Ref<string[]>;
+    onMenuItemClick: (key: string) => void;
+    onSubMenuClick: (key: string, openKeys: string[]) => void;
+    activeMenuItem: Ref<IProMenuItem | undefined>;
+    breadcrumbItems: Ref<string[]>;
+    tabs: Ref<{
+        name: string;
+        title: string;
+        fullPath: string;
+        active: boolean;
+    }[]>;
+    onTabClick: (key: string) => void;
+    onTabDelete: (key: string) => void;
+    keepAliveKeys: ComputedRef<string[]>;
+    siderWidth: number;
+    siderCollapsedWidth: number;
+    siderWidthPx: string;
+    siderCollapsedWidthPx: string;
+    siderCollapsed: Ref<boolean>;
+    onSiderCollapse: (val: boolean) => void;
+    readonly EProLayoutTheme: typeof EProLayoutTheme;
+}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
+    menuItems: {
+        type: PropType<IProMenuItem[]>;
+        required: false;
+        default: () => never[];
+    };
+    headerTitle: {
+        type: PropType<string>;
+        required: false;
+        default: string;
+    };
+    headerLogo: {
+        type: PropType<string>;
+        required: false;
+        default: string;
+    };
+    headerRightItemSlotNames: {
+        type: PropType<string[]>;
+        required: false;
+        default: () => never[];
+    };
+    hideThemeItem: {
+        type: PropType<boolean>;
+        required: false;
+        default: boolean;
+    };
+    footerTitle: {
+        type: PropType<string>;
+        required: false;
+        default: string;
+    };
+    theme: {
+        type: PropType<EProLayoutTheme>;
+        required: false;
+        default: EProLayoutTheme;
+    };
+    tabsMode: {
+        type: PropType<boolean>;
+        required: false;
+        default: boolean;
+    };
+    user: {
+        type: PropType<{
+            name: string;
+            avatar?: string | undefined;
+        }>;
+        required: false;
+        default: undefined;
+    };
+}>>, {
+    menuItems: IProMenuItem[];
+    headerTitle: string;
+    headerLogo: string;
+    headerRightItemSlotNames: string[];
+    hideThemeItem: boolean;
+    footerTitle: string;
+    theme: EProLayoutTheme;
+    tabsMode: boolean;
+    user: {
+        name: string;
+        avatar?: string | undefined;
+    };
+}>;
+export default _sfc_main;

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

@@ -0,0 +1,300 @@
+import { defineComponent, useCssVars, toRefs, useSlots, provide, computed, ref, resolveComponent, openBlock, createBlock, normalizeClass, withCtx, createVNode, createElementVNode, createTextVNode, toDisplayString, createCommentVNode, createElementBlock, Fragment, renderList, unref, renderSlot, resolveDynamicComponent, KeepAlive } from "vue";
+import { useHooks } from "./hooks/index.js";
+import { EProLayoutTheme } from "./enum.js";
+import { useThemeHooks } from "./hooks/theme.js";
+const _hoisted_1 = ["src"];
+const _hoisted_2 = { key: 0 };
+const _hoisted_3 = { key: 0 };
+const _hoisted_4 = ["src"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "pro-layout",
+  props: {
+    menuItems: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
+    headerTitle: {
+      type: String,
+      required: false,
+      default: "KeyBlade Pro"
+    },
+    headerLogo: {
+      type: String,
+      required: false,
+      default: "http://p3-armor.byteimg.com/tos-cn-i-49unhts6dw/dfdba5317c0c20ce20e64fac803d52bc.svg~tplv-49unhts6dw-image.image"
+    },
+    headerRightItemSlotNames: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
+    hideThemeItem: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    footerTitle: {
+      type: String,
+      required: false,
+      default: "KeyBlade Pro"
+    },
+    theme: {
+      type: String,
+      required: false,
+      default: EProLayoutTheme.light
+    },
+    tabsMode: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    user: {
+      type: Object,
+      required: false,
+      default: void 0
+    }
+  },
+  setup(__props) {
+    const props = __props;
+    useCssVars((_ctx) => ({
+      "9d934a56": siderWidthPx,
+      "473aa8e0": siderCollapsedWidthPx
+    }));
+    const prefixClsName = "keyblade-pro-layout";
+    const { menuItems } = toRefs(props);
+    const slots = useSlots();
+    const { currentTheme, onToggleCurrentTheme } = useThemeHooks(props.theme);
+    const {
+      menuSelectedKeys,
+      menuOpenKeys,
+      onMenuItemClick,
+      onSubMenuClick,
+      activeMenuItem,
+      breadcrumbItems,
+      tabs,
+      onTabClick,
+      onTabDelete
+    } = useHooks(menuItems, {
+      tabsMode: props.tabsMode
+    });
+    provide("ProBreadcrumbItems", breadcrumbItems);
+    const keepAliveKeys = computed(() => {
+      const keys = [];
+      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);
+      });
+      return keys;
+    });
+    const siderWidth = 220;
+    const siderCollapsedWidth = 48;
+    const siderWidthPx = `${siderWidth}px`;
+    const siderCollapsedWidthPx = `${siderCollapsedWidth}px`;
+    const siderCollapsed = ref(false);
+    const onSiderCollapse = (val) => {
+      siderCollapsed.value = val;
+    };
+    return (_ctx, _cache) => {
+      const _component_a_typography_title = resolveComponent("a-typography-title");
+      const _component_a_space = resolveComponent("a-space");
+      const _component_icon_sun_fill = resolveComponent("icon-sun-fill");
+      const _component_icon_moon_fill = resolveComponent("icon-moon-fill");
+      const _component_a_button = resolveComponent("a-button");
+      const _component_a_tooltip = resolveComponent("a-tooltip");
+      const _component_icon_user = resolveComponent("icon-user");
+      const _component_a_avatar = resolveComponent("a-avatar");
+      const _component_a_dropdown = resolveComponent("a-dropdown");
+      const _component_a_layout_header = resolveComponent("a-layout-header");
+      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_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");
+      const _component_a_layout_footer = resolveComponent("a-layout-footer");
+      const _component_a_layout = resolveComponent("a-layout");
+      return openBlock(), createBlock(_component_a_layout, {
+        class: normalizeClass(prefixClsName)
+      }, {
+        default: withCtx(() => [
+          createVNode(_component_a_layout_header, {
+            class: normalizeClass(`${prefixClsName}-header`)
+          }, {
+            default: withCtx(() => [
+              createElementVNode("div", {
+                class: normalizeClass(`${prefixClsName}-header-left`)
+              }, [
+                createVNode(_component_a_space, null, {
+                  default: withCtx(() => [
+                    createElementVNode("img", {
+                      alt: "logo",
+                      src: __props.headerLogo,
+                      style: { "height": "28px" }
+                    }, null, 8, _hoisted_1),
+                    !siderCollapsed.value ? (openBlock(), createBlock(_component_a_typography_title, {
+                      key: 0,
+                      heading: 5,
+                      style: { "margin": "0", "font-size": "18px" }
+                    }, {
+                      default: withCtx(() => [
+                        createTextVNode(toDisplayString(__props.headerTitle), 1)
+                      ]),
+                      _: 1
+                    })) : createCommentVNode("", true)
+                  ]),
+                  _: 1
+                })
+              ], 2),
+              createElementVNode("ul", {
+                class: normalizeClass(`${prefixClsName}-header-right`)
+              }, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(__props.headerRightItemSlotNames, (slotName) => {
+                  return openBlock(), createElementBlock(Fragment, { key: slotName }, [
+                    unref(slots)[slotName] ? (openBlock(), createElementBlock("li", _hoisted_2, [
+                      renderSlot(_ctx.$slots, slotName)
+                    ])) : createCommentVNode("", true)
+                  ], 64);
+                }), 128)),
+                !__props.hideThemeItem ? (openBlock(), createElementBlock("li", _hoisted_3, [
+                  createVNode(_component_a_tooltip, { content: "切换主题" }, {
+                    default: withCtx(() => [
+                      createVNode(_component_a_button, {
+                        class: normalizeClass(`${prefixClsName}-header-right-btn`),
+                        type: "outline",
+                        size: "medium",
+                        shape: "circle",
+                        onClick: unref(onToggleCurrentTheme)
+                      }, {
+                        icon: withCtx(() => [
+                          unref(currentTheme) === unref(EProLayoutTheme).light ? (openBlock(), createBlock(_component_icon_sun_fill, { key: 0 })) : createCommentVNode("", true),
+                          unref(currentTheme) === unref(EProLayoutTheme).dark ? (openBlock(), createBlock(_component_icon_moon_fill, { key: 1 })) : createCommentVNode("", true)
+                        ]),
+                        _: 1
+                      }, 8, ["class", "onClick"])
+                    ]),
+                    _: 1
+                  })
+                ])) : createCommentVNode("", true),
+                createElementVNode("li", null, [
+                  createVNode(_component_a_dropdown, { trigger: "hover" }, {
+                    content: withCtx(() => [
+                      renderSlot(_ctx.$slots, "avatar-dropdown-content")
+                    ]),
+                    default: withCtx(() => [
+                      createVNode(_component_a_avatar, {
+                        size: 32,
+                        style: { marginRight: "8px", cursor: "pointer" }
+                      }, {
+                        default: withCtx(() => {
+                          var _a, _b;
+                          return [
+                            ((_a = __props.user) == null ? void 0 : _a.avatar) ? (openBlock(), createElementBlock("img", {
+                              key: 0,
+                              alt: "avatar",
+                              src: (_b = __props.user) == null ? void 0 : _b.avatar
+                            }, null, 8, _hoisted_4)) : (openBlock(), createBlock(_component_icon_user, { key: 1 }))
+                          ];
+                        }),
+                        _: 1
+                      })
+                    ]),
+                    _: 3
+                  })
+                ])
+              ], 2)
+            ]),
+            _: 3
+          }, 8, ["class"]),
+          createVNode(_component_a_layout, null, {
+            default: withCtx(() => [
+              createVNode(_component_a_layout_sider, {
+                class: normalizeClass(`${prefixClsName}-sider`),
+                collapsible: true,
+                width: siderWidth,
+                breakpoint: "md",
+                collapsed: siderCollapsed.value,
+                "hide-trigger": true,
+                onCollapse: onSiderCollapse
+              }, {
+                default: withCtx(() => [
+                  createVNode(_component_kb_pro_menu, {
+                    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"])
+                ]),
+                _: 1
+              }, 8, ["class", "collapsed"]),
+              createVNode(_component_a_layout, {
+                class: normalizeClass(`${prefixClsName}-body` + (siderCollapsed.value ? ` ${prefixClsName}-body-collapsed` : ""))
+              }, {
+                default: withCtx(() => [
+                  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
+                        }, {
+                          default: withCtx(() => [
+                            createVNode(_component_router_view, null, {
+                              default: withCtx(({ Component, route }) => [
+                                !__props.tabsMode ? (openBlock(), createBlock(resolveDynamicComponent(Component), {
+                                  key: route.fullPath
+                                })) : (openBlock(), createBlock(KeepAlive, {
+                                  key: 1,
+                                  include: unref(keepAliveKeys),
+                                  max: 15
+                                }, [
+                                  (openBlock(), createBlock(resolveDynamicComponent(Component), {
+                                    key: route.fullPath
+                                  }))
+                                ], 1032, ["include"]))
+                              ]),
+                              _: 1
+                            })
+                          ]),
+                          _: 1
+                        }, 8, ["hide-page-wrapper"])
+                      ];
+                    }),
+                    _: 1
+                  }),
+                  unref(slots)["footer"] !== void 0 ? renderSlot(_ctx.$slots, "footer", { key: 0 }) : (openBlock(), createBlock(_component_a_layout_footer, {
+                    key: 1,
+                    class: normalizeClass(`${prefixClsName}-body-footer`)
+                  }, {
+                    default: withCtx(() => [
+                      createTextVNode(toDisplayString(__props.footerTitle), 1)
+                    ]),
+                    _: 1
+                  }, 8, ["class"]))
+                ]),
+                _: 3
+              }, 8, ["class"])
+            ]),
+            _: 3
+          })
+        ]),
+        _: 3
+      });
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

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

@@ -0,0 +1,4 @@
+const proLayout_vue_vue_type_style_index_0_lang = "";
+export {
+  proLayout_vue_vue_type_style_index_0_lang as default
+};

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

@@ -0,0 +1,6 @@
+import _sfc_main from "./pro-layout.vue.js";
+import { default as default2 } from "./pro-layout.vue.js";
+import "./pro-layout.vue2.js";
+export {
+  default2 as default
+};

package/es/pro-page-wrapper/index.d.ts

@@ -4,8 +4,8 @@ declare const ProPageWrapper: {
         $: ComponentInternalInstance;
         $data: {};
         $props: Partial<{
-            hidePageWrapper: boolean;
             breadcrumbItems: string[];
+            hidePageWrapper: boolean;
         }> & Omit<Readonly<ExtractPropTypes<{
             hidePageWrapper: {
                 type: PropType<boolean>;
@@ -17,7 +17,7 @@ declare const ProPageWrapper: {
                 required: false;
                 default: () => never[];
             };
-        }>> & VNodeProps & AllowedComponentProps & ComponentCustomProps, "hidePageWrapper" | "breadcrumbItems">;
+        }>> & VNodeProps & AllowedComponentProps & ComponentCustomProps, "breadcrumbItems" | "hidePageWrapper">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -46,8 +46,8 @@ declare const ProPageWrapper: {
             prefixClsName: string;
             prefixClsHideName: string;
         }, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, {
-            hidePageWrapper: boolean;
             breadcrumbItems: string[];
+            hidePageWrapper: boolean;
         }, {}, string> & {
             beforeCreate?: ((() => void) | (() => void)[]) | undefined;
             created?: ((() => void) | (() => void)[]) | undefined;
@@ -101,8 +101,8 @@ declare const ProPageWrapper: {
     prefixClsName: string;
     prefixClsHideName: string;
 }, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, {
-    hidePageWrapper: boolean;
     breadcrumbItems: string[];
+    hidePageWrapper: boolean;
 }, {}, string> & VNodeProps & AllowedComponentProps & ComponentCustomProps & {
     install: (app: App) => void;
 };

package/es/pro-page-wrapper/pro-page-wrapper.vue.d.ts

@@ -29,7 +29,7 @@ declare const _sfc_main: DefineComponent<{
         default: () => never[];
     };
 }>>, {
-    hidePageWrapper: boolean;
     breadcrumbItems: string[];
+    hidePageWrapper: boolean;
 }>;
 export default _sfc_main;

package/es/style.css

@@ -1,6 +1,80 @@
 .keyblade-pro-page-wrapper {
   padding: 0 20px 20px 20px;
 }
+.keyblade-pro-layout {
+  width: 100%;
+  height: 100%;
+}
+.keyblade-pro-layout :global(.arco-layout-sider-trigger) {
+  border-top: 0;
+}
+.keyblade-pro-layout-header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 60px;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 20px;
+  background-color: var(--color-bg-2);
+  border-bottom: 1px solid var(--color-border);
+}
+.keyblade-pro-layout-header-left {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+}
+.keyblade-pro-layout-header-right {
+  display: flex;
+  list-style: none;
+}
+.keyblade-pro-layout-header-right li {
+  display: flex;
+  align-items: center;
+  padding: 0 10px;
+}
+.keyblade-pro-layout-header-right .arco-btn-outline,
+.keyblade-pro-layout-header-right-btn {
+  border-color: rgb(var(--gray-2));
+  color: rgb(var(--gray-8));
+  font-size: 16px;
+}
+.keyblade-pro-layout-sider {
+  padding-top: 60px;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 99;
+  height: 100%;
+  transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
+}
+.keyblade-pro-layout-body {
+  padding-top: 60px;
+  padding-left: var(--9d934a56);
+  min-height: 100vh;
+  overflow-y: hidden;
+  background-color: var(--color-fill-2);
+  transition: padding 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
+}
+.keyblade-pro-layout-body-container {
+  background-color: var(--color-fill-2);
+  padding: 16px 20px 0;
+  display: flex;
+}
+.keyblade-pro-layout-body-footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 40px;
+  color: var(--color-text-2);
+  text-align: center;
+}
+.keyblade-pro-layout-body-collapsed {
+  padding-left: var(--473aa8e0);
+}
 .keyblade-pro-reuse-tabs {
   position: relative;
   background-color: var(--color-bg-2);

package/package.json

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

package/src/index.ts

@@ -3,10 +3,12 @@ import { ProBreadcrumb } from './pro-breadcrumb'
 import { ProMenu } from './pro-menu'
 import { ProPageWrapper } from './pro-page-wrapper'
 import { ProReuseTabs } from './pro-reuse-tabs'
+import { ProLayout } from './pro-layout'
 
 export default {
   install(app: App): void {
     app.use(ProBreadcrumb)
+    app.use(ProLayout)
     app.use(ProMenu)
     app.use(ProPageWrapper)
     app.use(ProReuseTabs)
@@ -16,6 +18,9 @@ export default {
 // 按组件导出
 export { default as ProBreadcrumb } from './pro-breadcrumb'
 
+export { default as ProLayout } from './pro-layout'
+export type { EProLayoutTheme } from './pro-layout'
+
 export { default as ProMenu } from './pro-menu'
 export type { IProMenuItem } from './pro-menu'