vben-layout.vue 13 KB

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