feat(virtual-scroll): implement virtual scrolling for diagnostics list

packages/runtime/package.json

@@ -13,6 +13,9 @@
     "build:test": "pnpm run build",
     "dev": "vite build --watch"
   },
+  "dependencies": {
+    "@tanstack/vue-virtual": "^3.13.12"
+  },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.0",
     "vite": "^7.0.2",

packages/runtime/src/components/Diagnostic.ce.vue

@@ -66,7 +66,7 @@ const errorSource = computed(() => {
 
 <template>
   <li class="message-item">
-    <pre class="message">
+    <pre class="message" :title="diagnostic.message">
     <!-- @vue-ignore -->
     <span class="plugin" :style="{ color: checkerColorMap[diagnostic.checkerId] }"
       >{{ `[${diagnostic.checkerId}]` }} </span
@@ -88,11 +88,14 @@ li {
 .message-item {
   border-bottom: 1px dotted #666;
   padding: 12px 0 0 0;
+  box-sizing: border-box;
+  height: 220px;
 }
 
 .message {
-  white-space: initial;
+  white-space: nowrap;
   font-weight: 600;
+  word-break: break-all;
 }
 
 pre {
@@ -110,6 +113,8 @@ pre {
   background: rgba(22, 24, 29, 0.85);
   margin-top: 8px;
   border-radius: 8px;
+  height: 140px;
+  overflow-y: auto;
 }
 
 .frame-code {

packages/runtime/src/components/List.ce.vue

@@ -1,24 +1,55 @@
 <script setup lang="ts">
-import Checker from './Checker.ce.vue'
-
-withDefaults(
-  defineProps<{
-    ulStyle?: string
-    base: string
-    checkerResults: any[]
-  }>(),
-  {
-    ulStyle: '',
-  }
+import {computed, ref} from "vue";
+import Diagnostic from "./Diagnostic.ce.vue";
+import {useVirtualizer} from "@tanstack/vue-virtual";
+
+const parentRef = ref<HTMLElement | null>(null)
+
+const props = withDefaults(
+    defineProps<{
+      ulStyle?: string
+      base: string
+      checkerResults: any[]
+    }>(),
+    {
+      ulStyle: '',
+    }
 )
+
+const diagnostics = computed(() => props.checkerResults.flatMap(item => item.diagnostics))
+
+const rowVirtualizer = useVirtualizer({
+  count: diagnostics.value.length,
+  getScrollElement: () => parentRef.value,
+  estimateSize: () => 220,
+  overscan: 5,
+})
+
+const virtualRows = computed(() => rowVirtualizer.value.getVirtualItems())
+
+const totalSize = computed(() => rowVirtualizer.value.getTotalSize())
+
 </script>
 
 <template>
-  <ul :style="ulStyle">
-    <li v-for="(checkerResult, index) in checkerResults" :key="index">
-      <Checker :diagnostics="checkerResult.diagnostics" :base="base" :index="index" />
-    </li>
-  </ul>
+  <div ref="parentRef" class="parent-container">
+    <ul :style="`height: ${totalSize}px; width: 100%; position: relative; ${ulStyle}`">
+      <li
+          v-for="virtualRow in virtualRows"
+          :key="virtualRow.index"
+          :style="{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: `${virtualRow.size}px`,
+            transform: `translateY(${virtualRow.start}px)`,
+          }"
+      >
+        <Diagnostic :diagnostic="diagnostics[virtualRow.index]" :base="base"/>
+      </li>
+    </ul>
+  </div>
 </template>
 
 <style>
@@ -31,4 +62,9 @@ ul {
   padding-inline: 0;
   margin-block: 0;
 }
+
+.parent-container {
+  height: 100%;
+  overflow: auto;
+}
 </style>