admin-web-template/src/layouts/default/content/useContentViewHeight.ts

import { computed, ref, unref } from 'vue'
import { createPageContext } from '@/hooks/component/usePageContext'
import { useWindowSizeFn } from '@/hooks/event/useWindowSizeFn'

const headerHeightRef = ref(0)
const footerHeightRef = ref(0)

export function useLayoutHeight() {
  function setHeaderHeight(val) {
    headerHeightRef.value = val
  }
  function setFooterHeight(val) {
    footerHeightRef.value = val
  }
  return { headerHeightRef, footerHeightRef, setHeaderHeight, setFooterHeight }
}

export function useContentViewHeight() {
  const contentHeight = ref(window.innerHeight)
  const pageHeight = ref(window.innerHeight)
  const getViewHeight = computed(() => {
    return unref(contentHeight) - unref(headerHeightRef) - unref(footerHeightRef) || 0
  })

  useWindowSizeFn(
    () => {
      contentHeight.value = window.innerHeight
    },
    100,
    { immediate: true },
  )

  function setPageHeight(height: number) {
    pageHeight.value = height
  }

  createPageContext({
    contentHeight: getViewHeight,
    setPageHeight,
    pageHeight,
  })
}