feat: 添加 usePageHeight hook 解决当无法约束子元素溢出的问题

[cvpv]

在做数据列表页面的时候，我想实现这样的效果：

• 搜索框和表格标题固定在顶部，不滚动
• 表格内容有 100 条数据时，只让表格内部滚动
• 分页器固定在底部，不滚动
• 不要整页滚动（滚动时顶部导航栏、搜索框都不会被滚走）

但是发现一个问题：虽然h-full能获取当前页面高度，但是当前layout下无法防止页面内容溢出。

<!--  这样写不起作用 -->
<div class="h-full overflow-hide">
  <el-table height="100%">...</el-table>
</div>

创建了一个 usePageHeight hook，它会自动计算出页面内容区的实际可用高度。

在组件中使用：

<script setup>
import { usePageHeight } from "@/layout/hooks/usePageHeight";

const pageHeight = usePageHeight();
</script>

<template>
  <div :style="{ height: pageHeight }" class="flex flex-col">
    <!-- 固定部分：搜索表单 -->
    <div class="shrink-0">
      <SearchForm />
    </div>
    
    <!-- 滚动部分：表格 -->
    <div class="flex-1 overflow-hidden">
      <el-table height="100%" :data="tableData">
        <!-- 100 条数据，只在表格内部滚动 -->
      </el-table>
    </div>
    
    <!-- 固定部分：分页器 -->
    <div class="shrink-0">
      <el-pagination />
    </div>
  </div>
</template>

[cvpv]

或者尝试维护layout，让系统支持下面的布局，这是非常常见的布局:
数据不足的时候自动高度

数据过多的时候固定页脚页头，使用表格内部滚动