feat: add dashboard page

packages/@core/ui-kit/layout-ui/package.json

@@ -39,8 +39,9 @@
   "dependencies": {
     "@vben-core/iconify": "workspace:*",
     "@vben-core/shadcn-ui": "workspace:*",
+    "@vben-core/toolkit": "workspace:*",
     "@vben-core/typings": "workspace:*",
     "@vueuse/core": "^10.11.0",
-    "vue": "^3.4.30"
+    "vue": "^3.4.31"
   }
 }

packages/@core/ui-kit/layout-ui/src/components/layout-content.vue

@@ -4,6 +4,8 @@ import type { ContentCompactType } from '@vben-core/typings';
 import type { CSSProperties } from 'vue';
 import { computed, onMounted, ref, watch } from 'vue';
 
+import { getElementVisibleHeight } from '@vben-core/toolkit';
+
 import { useCssVar, useDebounceFn, useWindowSize } from '@vueuse/core';
 
 interface Props {
@@ -54,12 +56,12 @@ const props = withDefaults(defineProps<Props>(), {
   paddingTop: 16,
 });
 
-const domElement = ref<HTMLDivElement | null>();
+const contentElement = ref<HTMLDivElement | null>();
 
 const { height, width } = useWindowSize();
 const contentClientHeight = useCssVar('--vben-content-client-height');
 const debouncedCalcHeight = useDebounceFn(() => {
-  contentClientHeight.value = `${domElement.value?.clientHeight ?? window.innerHeight}px`;
+  contentClientHeight.value = `${getElementVisibleHeight(contentElement.value)}px`;
 }, 200);
 
 const style = computed((): CSSProperties => {
@@ -97,7 +99,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <main ref="domElement" :style="style">
+  <main ref="contentElement" :style="style">
     <slot></slot>
   </main>
 </template>