From a1f7a3bd7181ebcaba065eb87e0de6e78025e0d0 Mon Sep 17 00:00:00 2001
From: root <root@v2202607378382480008.hotsrv.de>
Date: Tue, 14 Jul 2026 19:04:48 +0200
Subject: [PATCH] =?UTF-8?q?fix(web):=20=E6=8C=89=E7=9C=9F=E5=AE=9E?=
 =?UTF-8?q?=E9=AB=98=E5=BA=A6=E8=AE=A1=E7=AE=97=E8=99=9A=E6=8B=9F=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E7=AA=97=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/common/VirtualList.vue     | 51 ++++++++++++++++++-
 1 file changed, 49 insertions(+), 2 deletions(-)

diff --git a/web/hwlab-cloud-web/src/components/common/VirtualList.vue b/web/hwlab-cloud-web/src/components/common/VirtualList.vue
index fadf5c4c..69e9c992 100644
--- a/web/hwlab-cloud-web/src/components/common/VirtualList.vue
+++ b/web/hwlab-cloud-web/src/components/common/VirtualList.vue
@@ -2,7 +2,14 @@
 <!-- Implementation reference: draft-2026-07-13-p0-cloud-console. -->
 
 <script setup lang="ts" generic="T extends object">
-import { computed, ref } from "vue";
+import {
+  computed,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  watch,
+} from "vue";
 
 const props = withDefaults(defineProps<{
   items: T[];
@@ -18,8 +25,9 @@ const props = withDefaults(defineProps<{
 });
 
 const scrollTop = ref(0);
-const viewportHeight = ref(typeof props.height === "number" ? props.height : 420);
+const viewportHeight = ref(typeof props.height === "number" ? props.height : 0);
 const root = ref<HTMLElement | null>(null);
+let resizeObserver: ResizeObserver | null = null;
 const startIndex = computed(() => Math.max(0, Math.floor(scrollTop.value / props.itemHeight) - props.overscan));
 const endIndex = computed(() => Math.min(props.items.length, Math.ceil((scrollTop.value + viewportHeight.value) / props.itemHeight) + props.overscan));
 const visibleItems = computed(() => props.items.slice(startIndex.value, endIndex.value));
@@ -27,6 +35,45 @@ const totalHeight = computed(() => props.items.length * props.itemHeight);
 const windowOffset = computed(() => startIndex.value * props.itemHeight);
 const rootStyle = computed(() => ({ height: typeof props.height === "number" ? `${props.height}px` : props.height }));
 
+function readViewportHeight(): void {
+  const height = root.value?.clientHeight ?? 0;
+  if (height > 0 && height !== viewportHeight.value) viewportHeight.value = height;
+}
+
+function stopObservingViewport(): void {
+  resizeObserver?.disconnect();
+  resizeObserver = null;
+  if (typeof window !== "undefined") {
+    window.removeEventListener("resize", readViewportHeight);
+  }
+}
+
+function observeViewport(): void {
+  stopObservingViewport();
+  readViewportHeight();
+  if (!root.value) return;
+  if (typeof ResizeObserver !== "undefined") {
+    resizeObserver = new ResizeObserver(readViewportHeight);
+    resizeObserver.observe(root.value);
+    return;
+  }
+  if (typeof window !== "undefined") {
+    window.addEventListener("resize", readViewportHeight, { passive: true });
+  }
+}
+
+onMounted(observeViewport);
+onBeforeUnmount(stopObservingViewport);
+
+watch(
+  () => props.height,
+  async (height) => {
+    if (typeof height === "number") viewportHeight.value = height;
+    await nextTick();
+    readViewportHeight();
+  },
+);
+
 function onScroll(event: Event): void {
   const target = event.currentTarget;
   if (!(target instanceof HTMLElement)) return;