feat: 优化响应式布局，使用 CSS 支持的单位调整屏幕高度和宽度

src/App.vue

@@ -27,10 +27,14 @@ const themeConfig = computed(() => {
 .layout-wrapper {
   isolation: isolate;
 }
-.w-screen {
-  width: 100dvw;
+@supports (height: 100dvh) {
+  .h-screen {
+    height: 100dvh;
+  }
 }
-.h-screen {
-  height: 100dvh;
+@supports (width: 100dvw) {
+  .w-screen {
+    width: 100dvw;
+  }
 }
 </style>

src/pages/index-new.page.vue

@@ -7,7 +7,7 @@ import {
 </script>
 
 <template>
-  <div class="p-4" style="height: 100dvh; width: 100dvw">
+  <div class="p-4 h-screen w-screen">
     <PatternBackground
       :animate="true"
       :direction="PATTERN_BACKGROUND_DIRECTION.TopRight"