perf: improve overall theme color matching

packages/@core/hooks/src/use-content-height.ts

@@ -0,0 +1,45 @@
+import { computed, onMounted, ref, watch } from 'vue';
+
+import { CSS_VARIABLE_LAYOUT_CONTENT_HEIGHT } from '@vben-core/constants';
+import { getElementVisibleHeight } from '@vben-core/toolkit';
+
+import { useCssVar, useDebounceFn, useWindowSize } from '@vueuse/core';
+/**
+ * @zh_CN 获取内容高度(可视区域，不包含滚动条)
+ */
+function useContentHeight() {
+  const contentHeight = useCssVar(CSS_VARIABLE_LAYOUT_CONTENT_HEIGHT);
+
+  const contentStyles = computed(() => {
+    return {
+      height: `var(${CSS_VARIABLE_LAYOUT_CONTENT_HEIGHT})`,
+    };
+  });
+
+  return { contentHeight, contentStyles };
+}
+
+/**
+ * @zh_CN 创建内容高度监听
+ */
+function useContentHeightListener() {
+  const contentElement = ref<HTMLDivElement | null>(null);
+
+  const { height, width } = useWindowSize();
+  const contentHeight = useCssVar(CSS_VARIABLE_LAYOUT_CONTENT_HEIGHT);
+  const debouncedCalcHeight = useDebounceFn(() => {
+    contentHeight.value = `${getElementVisibleHeight(contentElement.value)}px`;
+  }, 200);
+
+  watch([height, width], () => {
+    debouncedCalcHeight();
+  });
+
+  onMounted(() => {
+    debouncedCalcHeight();
+  });
+
+  return { contentElement };
+}
+
+export { useContentHeight, useContentHeightListener };