@vrx-arco/pro-layout/dist/ProLayout/index.mjs

<p align="center"> <img src="https://vrx-arco.github.io/arco-design-pro/favicon.svg" width="200" height="250"> </p>

import { defineComponent, createVNode } from "vue";
import { Spin, Layout, LayoutHeader, LayoutContent, Drawer, Scrollbar, LayoutSider } from "@arco-design/web-vue";
import { useShareBreakpoints } from "@vrx-arco/use";
import { RouterView } from "vue-router";
import { useToggle } from "@vueuse/core";
import { style } from "../style/var.mjs";
import { NavBar } from "./components/NavBar/index.mjs";
import { ProMenu } from "./components/Menu/Menu.mjs";
const ProLayout = /* @__PURE__ */ defineComponent({
  name: "vrx-arco-pro-layout",
  props: {
    /**
     * 基于路由信息生成的菜单
     */
    menus: {
      type: Array,
      default: () => []
    },
    /**
     * 标题
     */
    title: String,
    /**
     * logo
     */
    logo: String,
    /**
     * 布局的全局加载状态
     */
    loading: {
      type: Boolean,
      default: false
    }
  },
  slots: Object,
  setup: (props, {
    slots
  }) => {
    const {
      bemClass
    } = style("pro-layout");
    const breakpoints = useShareBreakpoints();
    const isSmallerLg = breakpoints.smaller("lg");
    const [menuModelVisible, setMenuModelVisible] = useToggle(false);
    return () => {
      const {
        title,
        logo,
        menus,
        loading
      } = props;
      return createVNode(Spin, {
        "loading": loading,
        "class": bemClass("__spin"),
        "size": 30
      }, {
        default: () => [createVNode(Layout, {
          "class": bemClass()
        }, {
          default: () => [createVNode(LayoutHeader, {
            "class": bemClass("__header")
          }, {
            default: () => [createVNode(NavBar, {
              "title": title,
              "logo": logo,
              "onMenuClick": () => {
                setMenuModelVisible(true);
              }
            }, {
              default: () => {
                var _a;
                return [(_a = slots.headerToolbox) == null ? void 0 : _a.call(slots)];
              },
              logo: slots.logo,
              title: slots.title,
              logoContainer: slots.logoContainer,
              content: slots.navContent
            })]
          }), createVNode(LayoutContent, {
            "class": bemClass("__wrap-container")
          }, {
            default: () => [createVNode(Layout, {
              "class": bemClass("__wrap")
            }, {
              default: () => [isSmallerLg.value ? createVNode(Drawer, {
                "class": bemClass("__smaller-menu-drawer"),
                "placement": "left",
                "visible": menuModelVisible.value,
                "onUpdate:visible": ($event) => menuModelVisible.value = $event,
                "footer": false,
                "header": false,
                "maskClosable": true,
                "closable": false
              }, {
                default: () => [createVNode(Scrollbar, {
                  "outerClass": bemClass("__menu-scrollbar")
                }, {
                  default: () => [createVNode(ProMenu, {
                    "menu": menus
                  }, {
                    icon: slots.menuIcon
                  })]
                })]
              }) : createVNode(LayoutSider, {
                "breakpoint": "xl",
                "collapsible": true
              }, {
                default: () => [createVNode(Scrollbar, {
                  "outerClass": bemClass("__menu-scrollbar")
                }, {
                  default: () => [createVNode(ProMenu, {
                    "menu": menus
                  }, {
                    icon: slots.menuIcon
                  })]
                })]
              }), createVNode(LayoutContent, {
                "class": bemClass("__content")
              }, {
                default: () => {
                  var _a;
                  return [((_a = slots.default) == null ? void 0 : _a.call(slots)) || createVNode(RouterView, null, null)];
                }
              })]
            })]
          })]
        })]
      });
    };
  }
});
export {
  ProLayout
};