From fd0fb318e506a82fee181461966b9de5cc068867 Mon Sep 17 00:00:00 2001
From: rikka <admin@rikka.cc>
Date: Wed, 16 Jul 2025 11:23:53 +0800
Subject: [PATCH 1/2] feat(virtual-scroll): implement virtual scrolling for
 diagnostics list

- Replace `Checker` component with `Diagnostic` in virtualized list
- Add `@tanstack/vue-virtual` dependency for virtualization logic
- Style adjustments for `.message-item` and `.message` elements
- Update package.json to include new dependency
---
 packages/runtime/package.json                 |  3 +
 .../runtime/src/components/Diagnostic.ce.vue  |  9 ++-
 packages/runtime/src/components/List.ce.vue   | 68 ++++++++++++++-----
 pnpm-lock.yaml                                | 19 ++++++
 4 files changed, 81 insertions(+), 18 deletions(-)

diff --git a/packages/runtime/package.json b/packages/runtime/package.json
index 5a3b99be..ea8bad3d 100644
--- a/packages/runtime/package.json
+++ b/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",
diff --git a/packages/runtime/src/components/Diagnostic.ce.vue b/packages/runtime/src/components/Diagnostic.ce.vue
index ee8ba890..86c9e52f 100644
--- a/packages/runtime/src/components/Diagnostic.ce.vue
+++ b/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 {
diff --git a/packages/runtime/src/components/List.ce.vue b/packages/runtime/src/components/List.ce.vue
index d51bba6a..87b5a272 100644
--- a/packages/runtime/src/components/List.ce.vue
+++ b/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>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 45479965..95ab88d5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -79,6 +79,10 @@ importers:
         version: 1.6.3(@algolia/client-search@5.24.0)(@types/node@20.19.4)(postcss@8.5.6)(sass@1.89.2)(typescript@5.8.3)
 
   packages/runtime:
+    dependencies:
+      '@tanstack/vue-virtual':
+        specifier: ^3.13.12
+        version: 3.13.12(vue@3.5.17(typescript@5.8.3))
     devDependencies:
       '@vitejs/plugin-vue':
         specifier: ^6.0.0
@@ -1886,6 +1890,14 @@ packages:
     resolution: {integrity: sha512-tlqY9xq5ukxTUZBmoOp+m61cqwQD5pHJtFY3Mn8CA8ps6yghLH/Hw8UPdqg4OLmFW3IFlcXnQNmo/dh8HzXYIQ==}
     engines: {node: '>=18'}
 
+  '@tanstack/virtual-core@3.13.12':
+    resolution: {integrity: sha512-1YBOJfRHV4sXUmWsFSf5rQor4Ss82G8dQWLRbnk3GA4jeP8hQt1hxXh0tmflpC0dz3VgEv/1+qwPyLeWkQuPFA==}
+
+  '@tanstack/vue-virtual@3.13.12':
+    resolution: {integrity: sha512-vhF7kEU9EXWXh+HdAwKJ2m3xaOnTTmgcdXcF2pim8g4GvI7eRrk2YRuV5nUlZnd/NbCIX4/Ja2OZu5EjJL06Ww==}
+    peerDependencies:
+      vue: ^2.7.0 || ^3.0.0
+
   '@tsconfig/node20@20.1.6':
     resolution: {integrity: sha512-sz+Hqx9zwZDpZIV871WSbUzSqNIsXzghZydypnfgzPKLltVJfkINfUeTct31n/tTSa9ZE1ZOfKdRre1uHHquYQ==}
 
@@ -6248,6 +6260,13 @@ snapshots:
 
   '@sindresorhus/merge-streams@4.0.0': {}
 
+  '@tanstack/virtual-core@3.13.12': {}
+
+  '@tanstack/vue-virtual@3.13.12(vue@3.5.17(typescript@5.8.3))':
+    dependencies:
+      '@tanstack/virtual-core': 3.13.12
+      vue: 3.5.17(typescript@5.8.3)
+
   '@tsconfig/node20@20.1.6': {}
 
   '@tsconfig/strictest@2.0.5': {}

From b0dadfba0f0a1d43b8c415b6808d64a84bf7e142 Mon Sep 17 00:00:00 2001
From: rikka <admin@rikka.cc>
Date: Wed, 16 Jul 2025 11:34:14 +0800
Subject: [PATCH 2/2] feat: remove unused Checker.ce.vue component

- Delete `Checker.ce.vue` as it is no longer used
- No replacement or migration needed
- Clean up related imports and references
---
 .../runtime/src/components/Checker.ce.vue     | 33 -------------------
 1 file changed, 33 deletions(-)
 delete mode 100644 packages/runtime/src/components/Checker.ce.vue

diff --git a/packages/runtime/src/components/Checker.ce.vue b/packages/runtime/src/components/Checker.ce.vue
deleted file mode 100644
index fd177a85..00000000
--- a/packages/runtime/src/components/Checker.ce.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<script setup lang="ts">
-import Diagnostic from './Diagnostic.ce.vue'
-
-defineProps<{
-  diagnostics?: any[]
-  base: string
-}>()
-
-const key = (diagnostic: any): string => {
-  if (diagnostic.loc) {
-    return `${diagnostic.loc.file}-${diagnostic.loc.line}-${diagnostic.loc.column}`;
-  } else {
-    return diagnostic.id;
-  }
-}
-</script>
-
-<template>
-  <ul>
-    <Diagnostic v-for="d in diagnostics" :diagnostic="d" :base="base" :key="key(d)" />
-  </ul>
-</template>
-
-<style>
-ul {
-  list-style: none;
-}
-
-ul {
-  padding-inline: 0;
-  margin-block: 0;
-}
-</style>