@vrx-arco/pro-layout/dist/PageWrapper/index.js

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

import { style } from "../style/var.js";
import { Fragment, createVNode, defineComponent, mergeProps } from "vue";
import { Breadcrumb, BreadcrumbItem, Scrollbar } from "@arco-design/web-vue";
import { useRoute, useRouter } from "vue-router";
import IconApps from "@vrx-arco/icons-vue/IconApps";
const PageWrapper = /* @__PURE__ */ defineComponent({
	name: "vrx-arco-page-wrapper",
	props: { scrollbar: {
		type: Boolean,
		default: false
	} },
	setup: (props, { slots }) => {
		const { bemClass } = style("page-wrapper");
		const route = useRoute();
		const router = useRouter();
		const handleRoute = (name) => {
			router.replace({ name });
		};
		const renderContent = () => {
			if (props.scrollbar) return createVNode("main", { "class": bemClass("__content--scrollbar") }, [createVNode(Scrollbar, {
				"outerClass": bemClass("__scrollbar--out"),
				"class": bemClass("__scrollbar")
			}, { default: () => [slots.default?.()] })]);
			return createVNode("main", { "class": bemClass("__content") }, [slots.default?.()]);
		};
		return () => createVNode("section", { "class": bemClass() }, [createVNode("header", { "class": bemClass("__header") }, [createVNode(Breadcrumb, null, { default: () => [createVNode(BreadcrumbItem, null, { default: () => [createVNode(IconApps, { "class": "arco-icon" }, null)] }), route.matched.map((item) => {
			if (!item.meta?.title) return createVNode(Fragment, null, null);
			return createVNode(BreadcrumbItem, mergeProps({
				"class": bemClass("__breadcrumb-item"),
				"key": item.name
			}, { onClick: () => handleRoute(item.name) }), { default: () => [item.meta.title] });
		})] })]), renderContent()]);
	}
});
export { PageWrapper };