@keyblade/pro-components 0.0.2 → 0.0.3

package/es/index.d.ts

@@ -5,7 +5,7 @@ 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 { 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

@@ -8,6 +8,7 @@ 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";
+import { EProLayoutTheme } from "./pro-layout/enum.js";
 const index = {
   install(app) {
     app.use(ProBreadcrumb);
@@ -18,6 +19,7 @@ const index = {
   }
 };
 export {
+  EProLayoutTheme,
   ProBreadcrumb2 as ProBreadcrumb,
   ProLayout2 as ProLayout,
   ProMenu2 as ProMenu,

package/es/pro-layout/{hooks/index.d.ts → hooks.d.ts}

@@ -1,5 +1,5 @@
 import { type Ref } from 'vue';
-import type { IProMenuItem } from '../../pro-menu';
+import type { IProMenuItem } from '../pro-menu';
 export declare function useHooks(menuItems: Ref<IProMenuItem[]>, options: {
     tabsMode: boolean;
 }): {

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

@@ -9,15 +9,9 @@ declare const ProLayout: {
             menuItems: IProMenuItem[];
             headerTitle: string;
             headerLogo: string;
-            headerRightItemSlotNames: string[];
-            hideThemeItem: boolean;
-            footerTitle: string;
             theme: EProLayoutTheme;
+            footerTitle: string;
             tabsMode: boolean;
-            user: {
-                name: string;
-                avatar?: string | undefined;
-            };
         }> & Omit<Readonly<ExtractPropTypes<{
             menuItems: {
                 type: PropType<IProMenuItem[]>;
@@ -34,40 +28,24 @@ declare const ProLayout: {
                 required: false;
                 default: string;
             };
-            headerRightItemSlotNames: {
-                type: PropType<string[]>;
-                required: false;
-                default: () => never[];
-            };
-            hideThemeItem: {
-                type: PropType<boolean>;
+            theme: {
+                type: PropType<EProLayoutTheme>;
                 required: false;
-                default: boolean;
+                default: EProLayoutTheme;
             };
             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">;
+        }>> & {
+            onCollapse?: ((collapsed: boolean) => any) | undefined;
+        } & VNodeProps & AllowedComponentProps & ComponentCustomProps, "menuItems" | "headerTitle" | "headerLogo" | "theme" | "footerTitle" | "tabsMode">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -79,7 +57,7 @@ declare const ProLayout: {
         }>;
         $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;
+        $emit: (event: "collapse", collapsed: boolean) => void;
         $el: any;
         $options: ComponentOptionsBase<Readonly<ExtractPropTypes<{
             menuItems: {
@@ -97,48 +75,31 @@ declare const ProLayout: {
                 required: false;
                 default: string;
             };
-            headerRightItemSlotNames: {
-                type: PropType<string[]>;
-                required: false;
-                default: () => never[];
-            };
-            hideThemeItem: {
-                type: PropType<boolean>;
+            theme: {
+                type: PropType<EProLayoutTheme>;
                 required: false;
-                default: boolean;
+                default: EProLayoutTheme;
             };
             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;
-            };
-        }>>, {
+        }>> & {
+            onCollapse?: ((collapsed: boolean) => any) | undefined;
+        }, {
             prefixClsName: string;
             props: any;
+            emit: (event: "collapse", collapsed: boolean) => void;
             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;
@@ -160,20 +121,15 @@ declare const ProLayout: {
             siderCollapsedWidthPx: string;
             siderCollapsed: Ref<boolean>;
             onSiderCollapse: (val: boolean) => void;
-            readonly EProLayoutTheme: typeof EProLayoutTheme;
-        }, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, {
+        }, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+            collapse: (collapsed: boolean) => true;
+        }, string, {
             menuItems: IProMenuItem[];
             headerTitle: string;
             headerLogo: string;
-            headerRightItemSlotNames: string[];
-            hideThemeItem: boolean;
-            footerTitle: string;
             theme: EProLayoutTheme;
+            footerTitle: string;
             tabsMode: boolean;
-            user: {
-                name: string;
-                avatar?: string | undefined;
-            };
         }, {}, string> & {
             beforeCreate?: ((() => void) | (() => void)[]) | undefined;
             created?: ((() => void) | (() => void)[]) | undefined;
@@ -210,48 +166,31 @@ declare const ProLayout: {
             required: false;
             default: string;
         };
-        headerRightItemSlotNames: {
-            type: PropType<string[]>;
-            required: false;
-            default: () => never[];
-        };
-        hideThemeItem: {
-            type: PropType<boolean>;
+        theme: {
+            type: PropType<EProLayoutTheme>;
             required: false;
-            default: boolean;
+            default: EProLayoutTheme;
         };
         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<{
+    }>> & {
+        onCollapse?: ((collapsed: boolean) => any) | undefined;
+    } & ShallowUnwrapRef<{
         prefixClsName: string;
         props: any;
+        emit: (event: "collapse", collapsed: boolean) => void;
         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;
@@ -273,7 +212,6 @@ declare const ProLayout: {
         siderCollapsedWidthPx: string;
         siderCollapsed: Ref<boolean>;
         onSiderCollapse: (val: boolean) => void;
-        readonly EProLayoutTheme: typeof EProLayoutTheme;
     }> & {} & ComponentCustomProperties & {};
     __isFragment?: undefined;
     __isTeleport?: undefined;
@@ -294,48 +232,31 @@ declare const ProLayout: {
         required: false;
         default: string;
     };
-    headerRightItemSlotNames: {
-        type: PropType<string[]>;
-        required: false;
-        default: () => never[];
-    };
-    hideThemeItem: {
-        type: PropType<boolean>;
+    theme: {
+        type: PropType<EProLayoutTheme>;
         required: false;
-        default: boolean;
+        default: EProLayoutTheme;
     };
     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;
-    };
-}>>, {
+}>> & {
+    onCollapse?: ((collapsed: boolean) => any) | undefined;
+}, {
     prefixClsName: string;
     props: any;
+    emit: (event: "collapse", collapsed: boolean) => void;
     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;
@@ -357,20 +278,15 @@ declare const ProLayout: {
     siderCollapsedWidthPx: string;
     siderCollapsed: Ref<boolean>;
     onSiderCollapse: (val: boolean) => void;
-    readonly EProLayoutTheme: typeof EProLayoutTheme;
-}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, {
+}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+    collapse: (collapsed: boolean) => true;
+}, string, {
     menuItems: IProMenuItem[];
     headerTitle: string;
     headerLogo: string;
-    headerRightItemSlotNames: string[];
-    hideThemeItem: boolean;
-    footerTitle: string;
     theme: EProLayoutTheme;
+    footerTitle: string;
     tabsMode: boolean;
-    user: {
-        name: string;
-        avatar?: string | undefined;
-    };
 }, {}, string> & VNodeProps & AllowedComponentProps & ComponentCustomProps & {
     install: (app: App) => void;
 };

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

@@ -17,48 +17,29 @@ declare const _sfc_main: DefineComponent<{
         required: false;
         default: string;
     };
-    headerRightItemSlotNames: {
-        type: PropType<string[]>;
-        required: false;
-        default: () => never[];
-    };
-    hideThemeItem: {
-        type: PropType<boolean>;
+    theme: {
+        type: PropType<EProLayoutTheme>;
         required: false;
-        default: boolean;
+        default: EProLayoutTheme;
     };
     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;
+    emit: (event: "collapse", collapsed: boolean) => void;
     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;
@@ -80,8 +61,9 @@ declare const _sfc_main: DefineComponent<{
     siderCollapsedWidthPx: string;
     siderCollapsed: Ref<boolean>;
     onSiderCollapse: (val: boolean) => void;
-    readonly EProLayoutTheme: typeof EProLayoutTheme;
-}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
+}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+    collapse: (collapsed: boolean) => true;
+}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
     menuItems: {
         type: PropType<IProMenuItem[]>;
         required: false;
@@ -97,51 +79,29 @@ declare const _sfc_main: DefineComponent<{
         required: false;
         default: string;
     };
-    headerRightItemSlotNames: {
-        type: PropType<string[]>;
-        required: false;
-        default: () => never[];
-    };
-    hideThemeItem: {
-        type: PropType<boolean>;
+    theme: {
+        type: PropType<EProLayoutTheme>;
         required: false;
-        default: boolean;
+        default: EProLayoutTheme;
     };
     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;
-    };
-}>>, {
+}>> & {
+    onCollapse?: ((collapsed: boolean) => any) | undefined;
+}, {
     menuItems: IProMenuItem[];
     headerTitle: string;
     headerLogo: string;
-    headerRightItemSlotNames: string[];
-    hideThemeItem: boolean;
-    footerTitle: string;
     theme: EProLayoutTheme;
+    footerTitle: string;
     tabsMode: boolean;
-    user: {
-        name: string;
-        avatar?: string | undefined;
-    };
 }>;
 export default _sfc_main;

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

@@ -1,11 +1,7 @@
-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 { 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 { useHooks } from "./hooks.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: {
@@ -24,47 +20,34 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       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,
+    theme: {
+      type: String,
       required: false,
-      default: false
+      default: EProLayoutTheme.light
     },
     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) {
+  emits: {
+    "collapse": (collapsed) => true
+  },
+  setup(__props, { emit }) {
     const props = __props;
     useCssVars((_ctx) => ({
-      "9d934a56": siderWidthPx,
-      "473aa8e0": siderCollapsedWidthPx
+      "29cb7150": siderWidthPx,
+      "7085bb26": siderCollapsedWidthPx
     }));
     const prefixClsName = "keyblade-pro-layout";
     const { menuItems } = toRefs(props);
     const slots = useSlots();
-    const { currentTheme, onToggleCurrentTheme } = useThemeHooks(props.theme);
     const {
       menuSelectedKeys,
       menuOpenKeys,
@@ -97,17 +80,21 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const siderCollapsed = ref(false);
     const onSiderCollapse = (val) => {
       siderCollapsed.value = val;
+      emit("collapse", val);
     };
+    watch(() => props.theme, () => {
+      switch (props.theme) {
+        case EProLayoutTheme.light:
+          document.body.removeAttribute("arco-theme");
+          break;
+        case EProLayoutTheme.dark:
+          document.body.setAttribute("arco-theme", "dark");
+          break;
+      }
+    }, { immediate: true });
     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");
@@ -128,83 +115,31 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               createElementVNode("div", {
                 class: normalizeClass(`${prefixClsName}-header-left`)
               }, [
-                createVNode(_component_a_space, null, {
+                unref(slots)["header-left"] ? renderSlot(_ctx.$slots, "header-left", { key: 0 }) : (openBlock(), createBlock(_component_a_space, { key: 1 }, {
                   default: withCtx(() => [
                     createElementVNode("img", {
+                      class: normalizeClass(`${prefixClsName}-header-left-logo`),
                       alt: "logo",
-                      src: __props.headerLogo,
-                      style: { "height": "28px" }
-                    }, null, 8, _hoisted_1),
+                      src: __props.headerLogo
+                    }, null, 10, _hoisted_1),
                     !siderCollapsed.value ? (openBlock(), createBlock(_component_a_typography_title, {
                       key: 0,
-                      heading: 5,
-                      style: { "margin": "0", "font-size": "18px" }
+                      class: normalizeClass(`${prefixClsName}-header-left-title`),
+                      heading: 5
                     }, {
                       default: withCtx(() => [
                         createTextVNode(toDisplayString(__props.headerTitle), 1)
                       ]),
                       _: 1
-                    })) : createCommentVNode("", true)
+                    }, 8, ["class"])) : createCommentVNode("", true)
                   ]),
                   _: 1
-                })
+                }))
               ], 2),
-              createElementVNode("ul", {
+              createElementVNode("div", {
                 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
-                  })
-                ])
+                renderSlot(_ctx.$slots, "header-right")
               ], 2)
             ]),
             _: 3
@@ -221,17 +156,23 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 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"])
+                  createElementVNode("div", {
+                    class: normalizeClass(`${prefixClsName}-sider-content`)
+                  }, [
+                    renderSlot(_ctx.$slots, "sider-top"),
+                    createVNode(_component_kb_pro_menu, {
+                      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"])
+                  ], 2)
                 ]),
-                _: 1
+                _: 3
               }, 8, ["class", "collapsed"]),
               createVNode(_component_a_layout, {
                 class: normalizeClass(`${prefixClsName}-body` + (siderCollapsed.value ? ` ${prefixClsName}-body-collapsed` : ""))

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

@@ -31,7 +31,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const _component_a_menu = resolveComponent("a-menu");
       return openBlock(), createBlock(_component_a_menu, {
         class: normalizeClass(prefixClsName),
-        style: { width: "100%", height: "100%" },
         collapsed: __props.collapsed,
         "open-keys": __props.openKeys,
         "selected-keys": __props.selectedKeys,

package/es/style.css

@@ -27,20 +27,12 @@
   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-left-logo {
+  height: 28px;
 }
-.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-header-left-title.arco-typography {
+  margin: 0;
+  font-size: 18px;
 }
 .keyblade-pro-layout-sider {
   padding-top: 60px;
@@ -51,9 +43,15 @@
   height: 100%;
   transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
+.keyblade-pro-layout-sider-content {
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+  overflow: auto;
+}
 .keyblade-pro-layout-body {
   padding-top: 60px;
-  padding-left: var(--9d934a56);
+  padding-left: var(--29cb7150);
   min-height: 100vh;
   overflow-y: hidden;
   background-color: var(--color-fill-2);
@@ -73,7 +71,7 @@
   text-align: center;
 }
 .keyblade-pro-layout-body-collapsed {
-  padding-left: var(--473aa8e0);
+  padding-left: var(--7085bb26);
 }
 .keyblade-pro-reuse-tabs {
   position: relative;

package/package.json

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

package/src/index.ts

@@ -19,7 +19,7 @@ export default {
 export { default as ProBreadcrumb } from './pro-breadcrumb'
 
 export { default as ProLayout } from './pro-layout'
-export type { EProLayoutTheme } from './pro-layout'
+export { EProLayoutTheme } from './pro-layout'
 
 export { default as ProMenu } from './pro-menu'
 export type { IProMenuItem } from './pro-menu'

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

@@ -1,6 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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
-};