vben-layout.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605
  1. <script setup lang="ts">
  2. import type { VbenLayoutProps } from './vben-layout';
  3. import type { CSSProperties } from 'vue';
  4. import { computed, ref, watch } from 'vue';
  5. import {
  6. SCROLL_FIXED_CLASS,
  7. useLayoutFooterStyle,
  8. useLayoutHeaderStyle,
  9. } from '@vben-core/composables';
  10. import { Menu } from '@vben-core/icons';
  11. import { VbenIconButton } from '@vben-core/shadcn-ui';
  12. import { ELEMENT_ID_MAIN_CONTENT } from '@vben-core/shared/constants';
  13. import { useMouse, useScroll, useThrottleFn } from '@vueuse/core';
  14. import {
  15. LayoutContent,
  16. LayoutFooter,
  17. LayoutHeader,
  18. LayoutSidebar,
  19. LayoutTabbar,
  20. } from './components';
  21. import { useLayout } from './hooks/use-layout';
  22. interface Props extends VbenLayoutProps {}
  23. defineOptions({
  24. name: 'VbenLayout',
  25. });
  26. const props = withDefaults(defineProps<Props>(), {
  27. contentCompact: 'wide',
  28. contentCompactWidth: 1200,
  29. contentPadding: 0,
  30. contentPaddingBottom: 0,
  31. contentPaddingLeft: 0,
  32. contentPaddingRight: 0,
  33. contentPaddingTop: 0,
  34. footerEnable: false,
  35. footerFixed: true,
  36. footerHeight: 32,
  37. headerHeight: 50,
  38. headerHidden: false,
  39. headerMode: 'fixed',
  40. headerToggleSidebarButton: true,
  41. headerVisible: true,
  42. isMobile: false,
  43. layout: 'sidebar-nav',
  44. sidebarCollapseShowTitle: false,
  45. sidebarExtraCollapsedWidth: 60,
  46. sidebarHidden: false,
  47. sidebarMixedWidth: 80,
  48. sidebarTheme: 'dark',
  49. sidebarWidth: 180,
  50. sideCollapseWidth: 60,
  51. tabbarEnable: true,
  52. tabbarHeight: 40,
  53. zIndex: 200,
  54. });
  55. const emit = defineEmits<{ sideMouseLeave: []; toggleSidebar: [] }>();
  56. const sidebarCollapse = defineModel<boolean>('sidebarCollapse');
  57. const sidebarExtraVisible = defineModel<boolean>('sidebarExtraVisible');
  58. const sidebarExtraCollapse = defineModel<boolean>('sidebarExtraCollapse');
  59. const sidebarExpandOnHover = defineModel<boolean>('sidebarExpandOnHover');
  60. const sidebarEnable = defineModel<boolean>('sidebarEnable', { default: true });
  61. // side是否处于hover状态展开菜单中
  62. const sidebarExpandOnHovering = ref(false);
  63. const headerIsHidden = ref(false);
  64. const contentRef = ref();
  65. const {
  66. arrivedState,
  67. directions,
  68. isScrolling,
  69. y: scrollY,
  70. } = useScroll(document);
  71. const { setLayoutHeaderHeight } = useLayoutHeaderStyle();
  72. const { setLayoutFooterHeight } = useLayoutFooterStyle();
  73. const { y: mouseY } = useMouse({ target: contentRef, type: 'client' });
  74. const {
  75. currentLayout,
  76. isFullContent,
  77. isHeaderMixedNav,
  78. isHeaderNav,
  79. isMixedNav,
  80. isSidebarMixedNav,
  81. } = useLayout(props);
  82. /**
  83. * 顶栏是否自动隐藏
  84. */
  85. const isHeaderAutoMode = computed(() => props.headerMode === 'auto');
  86. const headerWrapperHeight = computed(() => {
  87. let height = 0;
  88. if (props.headerVisible && !props.headerHidden) {
  89. height += props.headerHeight;
  90. }
  91. if (props.tabbarEnable) {
  92. height += props.tabbarHeight;
  93. }
  94. return height;
  95. });
  96. const getSideCollapseWidth = computed(() => {
  97. const { sidebarCollapseShowTitle, sidebarMixedWidth, sideCollapseWidth } =
  98. props;
  99. return sidebarCollapseShowTitle ||
  100. isSidebarMixedNav.value ||
  101. isHeaderMixedNav.value
  102. ? sidebarMixedWidth
  103. : sideCollapseWidth;
  104. });
  105. /**
  106. * 动态获取侧边区域是否可见
  107. */
  108. const sidebarEnableState = computed(() => {
  109. return !isHeaderNav.value && sidebarEnable.value;
  110. });
  111. /**
  112. * 侧边区域离顶部高度
  113. */
  114. const sidebarMarginTop = computed(() => {
  115. const { headerHeight, isMobile } = props;
  116. return isMixedNav.value && !isMobile ? headerHeight : 0;
  117. });
  118. /**
  119. * 动态获取侧边宽度
  120. */
  121. const getSidebarWidth = computed(() => {
  122. const { isMobile, sidebarHidden, sidebarMixedWidth, sidebarWidth } = props;
  123. let width = 0;
  124. if (sidebarHidden) {
  125. return width;
  126. }
  127. if (
  128. !sidebarEnableState.value ||
  129. (sidebarHidden &&
  130. !isSidebarMixedNav.value &&
  131. !isMixedNav.value &&
  132. !isHeaderMixedNav.value)
  133. ) {
  134. return width;
  135. }
  136. if ((isHeaderMixedNav.value || isSidebarMixedNav.value) && !isMobile) {
  137. width = sidebarMixedWidth;
  138. } else if (sidebarCollapse.value) {
  139. width = isMobile ? 0 : getSideCollapseWidth.value;
  140. } else {
  141. width = sidebarWidth;
  142. }
  143. return width;
  144. });
  145. /**
  146. * 获取扩展区域宽度
  147. */
  148. const sidebarExtraWidth = computed(() => {
  149. const { sidebarExtraCollapsedWidth, sidebarWidth } = props;
  150. return sidebarExtraCollapse.value ? sidebarExtraCollapsedWidth : sidebarWidth;
  151. });
  152. /**
  153. * 是否侧边栏模式,包含混合侧边
  154. */
  155. const isSideMode = computed(
  156. () =>
  157. currentLayout.value === 'mixed-nav' ||
  158. currentLayout.value === 'sidebar-mixed-nav' ||
  159. currentLayout.value === 'sidebar-nav' ||
  160. currentLayout.value === 'header-mixed-nav' ||
  161. currentLayout.value === 'header-sidebar-nav',
  162. );
  163. /**
  164. * header fixed值
  165. */
  166. const headerFixed = computed(() => {
  167. const { headerMode } = props;
  168. return (
  169. isMixedNav.value ||
  170. headerMode === 'fixed' ||
  171. headerMode === 'auto-scroll' ||
  172. headerMode === 'auto'
  173. );
  174. });
  175. const showSidebar = computed(() => {
  176. return isSideMode.value && sidebarEnable.value && !props.sidebarHidden;
  177. });
  178. /**
  179. * 遮罩可见性
  180. */
  181. const maskVisible = computed(() => !sidebarCollapse.value && props.isMobile);
  182. const mainStyle = computed(() => {
  183. let width = '100%';
  184. let sidebarAndExtraWidth = 'unset';
  185. if (
  186. headerFixed.value &&
  187. currentLayout.value !== 'header-nav' &&
  188. currentLayout.value !== 'mixed-nav' &&
  189. currentLayout.value !== 'header-sidebar-nav' &&
  190. showSidebar.value &&
  191. !props.isMobile
  192. ) {
  193. // fixed模式下生效
  194. const isSideNavEffective =
  195. (isSidebarMixedNav.value || isHeaderMixedNav.value) &&
  196. sidebarExpandOnHover.value &&
  197. sidebarExtraVisible.value;
  198. if (isSideNavEffective) {
  199. const sideCollapseWidth = sidebarCollapse.value
  200. ? getSideCollapseWidth.value
  201. : props.sidebarMixedWidth;
  202. const sideWidth = sidebarExtraCollapse.value
  203. ? props.sidebarExtraCollapsedWidth
  204. : props.sidebarWidth;
  205. // 100% - 侧边菜单混合宽度 - 菜单宽度
  206. sidebarAndExtraWidth = `${sideCollapseWidth + sideWidth}px`;
  207. width = `calc(100% - ${sidebarAndExtraWidth})`;
  208. } else {
  209. sidebarAndExtraWidth =
  210. sidebarExpandOnHovering.value && !sidebarExpandOnHover.value
  211. ? `${getSideCollapseWidth.value}px`
  212. : `${getSidebarWidth.value}px`;
  213. width = `calc(100% - ${sidebarAndExtraWidth})`;
  214. }
  215. }
  216. return {
  217. sidebarAndExtraWidth,
  218. width,
  219. };
  220. });
  221. // 计算 tabbar 的样式
  222. const tabbarStyle = computed((): CSSProperties => {
  223. let width = '';
  224. let marginLeft = 0;
  225. // 如果不是混合导航,tabbar 的宽度为 100%
  226. if (!isMixedNav.value || props.sidebarHidden) {
  227. width = '100%';
  228. } else if (sidebarEnable.value) {
  229. // 鼠标在侧边栏上时,且侧边栏展开时的宽度
  230. const onHoveringWidth = sidebarExpandOnHover.value
  231. ? props.sidebarWidth
  232. : getSideCollapseWidth.value;
  233. // 设置 marginLeft,根据侧边栏是否折叠来决定
  234. marginLeft = sidebarCollapse.value
  235. ? getSideCollapseWidth.value
  236. : onHoveringWidth;
  237. // 设置 tabbar 的宽度,计算方式为 100% 减去侧边栏的宽度
  238. width = `calc(100% - ${sidebarCollapse.value ? getSidebarWidth.value : onHoveringWidth}px)`;
  239. } else {
  240. // 默认情况下,tabbar 的宽度为 100%
  241. width = '100%';
  242. }
  243. return {
  244. marginLeft: `${marginLeft}px`,
  245. width,
  246. };
  247. });
  248. const contentStyle = computed((): CSSProperties => {
  249. const fixed = headerFixed.value;
  250. const { footerEnable, footerFixed, footerHeight } = props;
  251. return {
  252. marginTop:
  253. fixed &&
  254. !isFullContent.value &&
  255. !headerIsHidden.value &&
  256. (!isHeaderAutoMode.value || scrollY.value < headerWrapperHeight.value)
  257. ? `${headerWrapperHeight.value}px`
  258. : 0,
  259. paddingBottom: `${footerEnable && footerFixed ? footerHeight : 0}px`,
  260. };
  261. });
  262. const headerZIndex = computed(() => {
  263. const { zIndex } = props;
  264. const offset = isMixedNav.value ? 1 : 0;
  265. return zIndex + offset;
  266. });
  267. const headerWrapperStyle = computed((): CSSProperties => {
  268. const fixed = headerFixed.value;
  269. return {
  270. height: isFullContent.value ? '0' : `${headerWrapperHeight.value}px`,
  271. left: isMixedNav.value ? 0 : mainStyle.value.sidebarAndExtraWidth,
  272. position: fixed ? 'fixed' : 'static',
  273. top:
  274. headerIsHidden.value || isFullContent.value
  275. ? `-${headerWrapperHeight.value}px`
  276. : 0,
  277. width: mainStyle.value.width,
  278. 'z-index': headerZIndex.value,
  279. };
  280. });
  281. /**
  282. * 侧边栏z-index
  283. */
  284. const sidebarZIndex = computed(() => {
  285. const { isMobile, zIndex } = props;
  286. let offset = isMobile || isSideMode.value ? 1 : -1;
  287. if (isMixedNav.value) {
  288. offset += 1;
  289. }
  290. return zIndex + offset;
  291. });
  292. const footerWidth = computed(() => {
  293. if (!props.footerFixed) {
  294. return '100%';
  295. }
  296. return mainStyle.value.width;
  297. });
  298. const maskStyle = computed((): CSSProperties => {
  299. return { zIndex: props.zIndex };
  300. });
  301. const showHeaderToggleButton = computed(() => {
  302. return (
  303. props.isMobile ||
  304. (props.headerToggleSidebarButton &&
  305. isSideMode.value &&
  306. !isSidebarMixedNav.value &&
  307. !isMixedNav.value &&
  308. !props.isMobile)
  309. );
  310. });
  311. const showHeaderLogo = computed(() => {
  312. return !isSideMode.value || isMixedNav.value || props.isMobile;
  313. });
  314. watch(
  315. () => props.isMobile,
  316. (val) => {
  317. if (val) {
  318. sidebarCollapse.value = true;
  319. }
  320. },
  321. {
  322. immediate: true,
  323. },
  324. );
  325. watch(
  326. [() => headerWrapperHeight.value, () => isFullContent.value],
  327. ([height]) => {
  328. setLayoutHeaderHeight(isFullContent.value ? 0 : height);
  329. },
  330. {
  331. immediate: true,
  332. },
  333. );
  334. watch(
  335. () => props.footerHeight,
  336. (height: number) => {
  337. setLayoutFooterHeight(height);
  338. },
  339. {
  340. immediate: true,
  341. },
  342. );
  343. {
  344. const mouseMove = () => {
  345. mouseY.value > headerWrapperHeight.value
  346. ? (headerIsHidden.value = true)
  347. : (headerIsHidden.value = false);
  348. };
  349. watch(
  350. [() => props.headerMode, () => mouseY.value],
  351. () => {
  352. if (!isHeaderAutoMode.value || isMixedNav.value || isFullContent.value) {
  353. if (props.headerMode !== 'auto-scroll') {
  354. headerIsHidden.value = false;
  355. }
  356. return;
  357. }
  358. headerIsHidden.value = true;
  359. mouseMove();
  360. },
  361. {
  362. immediate: true,
  363. },
  364. );
  365. }
  366. {
  367. const checkHeaderIsHidden = useThrottleFn((top, bottom, topArrived) => {
  368. if (scrollY.value < headerWrapperHeight.value) {
  369. headerIsHidden.value = false;
  370. return;
  371. }
  372. if (topArrived) {
  373. headerIsHidden.value = false;
  374. return;
  375. }
  376. if (top) {
  377. headerIsHidden.value = false;
  378. } else if (bottom) {
  379. headerIsHidden.value = true;
  380. }
  381. }, 300);
  382. watch(
  383. () => scrollY.value,
  384. () => {
  385. if (
  386. props.headerMode !== 'auto-scroll' ||
  387. isMixedNav.value ||
  388. isFullContent.value
  389. ) {
  390. return;
  391. }
  392. if (isScrolling.value) {
  393. checkHeaderIsHidden(
  394. directions.top,
  395. directions.bottom,
  396. arrivedState.top,
  397. );
  398. }
  399. },
  400. );
  401. }
  402. function handleClickMask() {
  403. sidebarCollapse.value = true;
  404. }
  405. function handleHeaderToggle() {
  406. if (props.isMobile) {
  407. sidebarCollapse.value = false;
  408. } else {
  409. emit('toggleSidebar');
  410. }
  411. }
  412. const idMainContent = ELEMENT_ID_MAIN_CONTENT;
  413. </script>
  414. <template>
  415. <div class="relative flex min-h-full w-full">
  416. <LayoutSidebar
  417. v-if="sidebarEnableState"
  418. v-model:collapse="sidebarCollapse"
  419. v-model:expand-on-hover="sidebarExpandOnHover"
  420. v-model:expand-on-hovering="sidebarExpandOnHovering"
  421. v-model:extra-collapse="sidebarExtraCollapse"
  422. v-model:extra-visible="sidebarExtraVisible"
  423. :collapse-width="getSideCollapseWidth"
  424. :dom-visible="!isMobile"
  425. :extra-width="sidebarExtraWidth"
  426. :fixed-extra="sidebarExpandOnHover"
  427. :header-height="isMixedNav ? 0 : headerHeight"
  428. :is-sidebar-mixed="isSidebarMixedNav || isHeaderMixedNav"
  429. :margin-top="sidebarMarginTop"
  430. :mixed-width="sidebarMixedWidth"
  431. :show="showSidebar"
  432. :theme="sidebarTheme"
  433. :width="getSidebarWidth"
  434. :z-index="sidebarZIndex"
  435. @leave="() => emit('sideMouseLeave')"
  436. >
  437. <template v-if="isSideMode && !isMixedNav" #logo>
  438. <slot name="logo"></slot>
  439. </template>
  440. <template v-if="isSidebarMixedNav || isHeaderMixedNav">
  441. <slot name="mixed-menu"></slot>
  442. </template>
  443. <template v-else>
  444. <slot name="menu"></slot>
  445. </template>
  446. <template #extra>
  447. <slot name="side-extra"></slot>
  448. </template>
  449. <template #extra-title>
  450. <slot name="side-extra-title"></slot>
  451. </template>
  452. </LayoutSidebar>
  453. <div
  454. ref="contentRef"
  455. class="flex flex-1 flex-col overflow-hidden transition-all duration-300 ease-in"
  456. >
  457. <div
  458. :class="[
  459. {
  460. 'shadow-[0_16px_24px_hsl(var(--background))]': scrollY > 20,
  461. },
  462. SCROLL_FIXED_CLASS,
  463. ]"
  464. :style="headerWrapperStyle"
  465. class="overflow-hidden transition-all duration-200"
  466. >
  467. <LayoutHeader
  468. v-if="headerVisible"
  469. :full-width="!isSideMode"
  470. :height="headerHeight"
  471. :is-mobile="isMobile"
  472. :show="!isFullContent && !headerHidden"
  473. :sidebar-width="sidebarWidth"
  474. :theme="headerTheme"
  475. :width="mainStyle.width"
  476. :z-index="headerZIndex"
  477. >
  478. <template v-if="showHeaderLogo" #logo>
  479. <slot name="logo"></slot>
  480. </template>
  481. <template #toggle-button>
  482. <VbenIconButton
  483. v-if="showHeaderToggleButton"
  484. class="my-0 mr-1 rounded-md"
  485. @click="handleHeaderToggle"
  486. >
  487. <Menu class="size-4" />
  488. </VbenIconButton>
  489. </template>
  490. <slot name="header"></slot>
  491. </LayoutHeader>
  492. <LayoutTabbar
  493. v-if="tabbarEnable"
  494. :height="tabbarHeight"
  495. :style="tabbarStyle"
  496. >
  497. <slot name="tabbar"></slot>
  498. </LayoutTabbar>
  499. </div>
  500. <!-- </div> -->
  501. <LayoutContent
  502. :id="idMainContent"
  503. :content-compact="contentCompact"
  504. :content-compact-width="contentCompactWidth"
  505. :padding="contentPadding"
  506. :padding-bottom="contentPaddingBottom"
  507. :padding-left="contentPaddingLeft"
  508. :padding-right="contentPaddingRight"
  509. :padding-top="contentPaddingTop"
  510. :style="contentStyle"
  511. class="transition-[margin-top] duration-200"
  512. >
  513. <slot name="content"></slot>
  514. <template #overlay>
  515. <slot name="content-overlay"></slot>
  516. </template>
  517. </LayoutContent>
  518. <LayoutFooter
  519. v-if="footerEnable"
  520. :fixed="footerFixed"
  521. :height="footerHeight"
  522. :show="!isFullContent"
  523. :width="footerWidth"
  524. :z-index="zIndex"
  525. >
  526. <slot name="footer"></slot>
  527. </LayoutFooter>
  528. </div>
  529. <slot name="extra"></slot>
  530. <div
  531. v-if="maskVisible"
  532. :style="maskStyle"
  533. class="bg-overlay fixed left-0 top-0 h-full w-full transition-[background-color] duration-200"
  534. @click="handleClickMask"
  535. ></div>
  536. </div>
  537. </template>